31:Taab,mdh`D3 6.0 が登場しました！　[うれしい新機能や改善点](https://observablehq.com/d/08a5160d4c49d1f6)があります。また、いくつか重要なAPIが変更されています。でも安心してください。ほとんどのメソッドは、v5と同じように動作します。ただ、一部のメソッドには下位互換性がありません。ここでは、D3 v6にアップグレードするときに注意すべき変更点を**あますところなく**紹介しています。 **ES2015の採用** * **すべての**D3モジュールはES2015を採用しました。古いブラウザと互換性をもたせる必要がある開発者はトランスパイレーションを使ってください。 [[詳細](#es2015)] **d3-selection**の新しいイベントマネージャ: * d3.event ⇨ すべてのリスナーで (event) が第1引数で渡されます [[詳細](#events)] * d3.mouse, d3.touch, d3.touches, d3.clientPoint ⇨ d3.pointer [[詳細](#pointer)] **d3-brush**, **d3-drag**, **d3-zoom**も新しいイベントマネージャに: * *brush*.on リスナーはeventを受け取ります [[詳細](#event_brush)] * *drag*.on リスナーはeventを受け取ります [[詳細](#event_drag)] * *zoom*.on リスナーはeventを受け取ります [[詳細](#event_zoom)] **d3-voronoi**は非推奨になり、[d3-delaunay](https://github.com/d3/d3-delaunay)に置き換え: * d3.voronoi ⇨ d3.Delaunay [[詳細](#delaunay)] **d3-collection**は非推奨になり、各種メソッドが置き換え: * d3.nest ⇨ (d3-arrayの) d3.group と d3.rollup [[詳細](#group)] * d3.map ⇨ Map [[詳細](#collection)] * d3.set ⇨ Set [[詳細](#collection)] * d3.keys ⇨ Object.keys [[詳細](#collection)] * d3.values ⇨ Object.values [[詳細](#collection)] * d3.entries ⇨ Object.entries [[詳細](#collection)] **d3-array**の2つのメソッドの名称変更: * d3.histogram ⇨ d3.bin [[詳細](#bin)] * d3.scan ⇨ d3.leastIndex [[詳細](#leastIndex)] **d3-interpolate**の補助的なメソッドに大きな変更: * d3.interpolateTransformCssの入力が厳格に [[詳細](#interpolateTransformCss)] **d3-format**のマイナス記号が変更: * 負の値のデフォルト記号がハイフンからユニコードのマイナスに [[詳細](#minus)] **bower** * パッケージマネージャ[bower](https://github.com/mbostock-bower/d3-bower)のサポートを終了。 [unpkg](https://unpkg.com/d3)または[cdnjs](https://cdnjs.com/libraries/d3)を使用してください。 **これで全部です。** 以下のセクションでは、既存のコードをd3@6にアップグレードする方法をくわしく説明します。 --- `32:T6fc,events = mdh`## イベント管理グローバルな**d3.event**は削除されました。 d3.eventは、すべてのリスナーに第1引数として渡されるローカルイベントに置き換えられました。たとえばこれは、 ~~~{js} selection.on("mousemove", function(d) { … ~~~d3.event~~~ と d を使う … }) ~~~ 次のように書きます。 ~~~{js} selection.on("mousemove", function(___event___, d) { … ___event___ と d を使う … }) ~~~ より詳細にいえば、以前のリスナーはセレクションのデータム(*d*)、インデックス(*i*)、要素(*e*)を受け取っていました。現在のリスナーは、イベントとデータムを受け取り、*this*はターゲットノードになります。結果としてこれは、 ~~~{js} selection.on("click", function(d~~~, i, e~~~) { console.log(d, i, e); }) ~~~ 次のように置き換えられます。 ~~~{js} selection.on("click", function(___event___, d) { const e = ___selection.nodes()___; const i = ___e.indexOf(this)___; console.log(d, i, e); }) ~~~ [event.currentTarget](https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget)で、リスナーとバインドされた要素にアクセスできることに注意してください。アロー関数では*this*の代わりにevent.currentTargetを使うことができます。 ~~~{js} selection.on("click", (___event___, d) => { console.log(event.currentTarget); }) ~~~ （別のテクニックとして、インデックス*i*が必要な場合、[Zoom with tooltip](https://observablehq.com/@d3/zoom-with-tooltip)ノートブックでおこなっているように、データムにインデックスを埋め込む方法もあります。） `33:T4c1,event_brush = mdh` **d3.brush**では、以前はこのような[ブラシハンドラが一般的](https://observablehq.com/@d3/double-click-brush-clear)でした。 ~~~ function brushed() { const selection = ~~~d3.event~~~.selection; if (selection === null) { circle.attr("stroke", null); } else { const [x0, x1] = selection.map(x.invert); circle.attr("stroke", d => x0 <= d && d <= x1 ? "red" : null); } } ~~~ これからは次のように書きます。 ~~~ function brushed(___event___) { const selection = ___event___.selection; if (selection === null) { circle.attr("stroke", null); } else { const [x0, x1] = selection.map(x.invert); circle.attr("stroke", d => x0 <= d && d <= x1 ? "red" : null); } } ~~~ さらにeventを[分割](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)すると、よりよいです。 ~~~ function brushed(___{selection}___) { if (selection === null) { circle.attr("stroke", null); } else { const [x0, x1] = selection.map(x.invert); circle.attr("stroke", d => x0 <= d && d <= x1 ? "red" : null); } } ~~~ `34:T8db,group = mdh`## d3.nestはd3.groupに [d3-collection](https://github.com/d3/d3-collection)にあったd3.nestはなくなりました。以前は次のようなコードでした。 ~~~js node = svg.selectAll("g") .data(~~~d3.nest()~~~.key(d => d.height).entries(~~~root.descendants()~~~)) ~~~ これからは次のように書きます。 ~~~js node = svg.selectAll("g") .data(___d3.group___(___root___, d => d.height)) ~~~ **値**は各グループの.valuesプロパティにはありません。代わりに、グループそのものが[name, values]ペアとなり、d[1]で値にアクセスできます。 ~~~js selection .data(d => ~~~d.values~~~) .data(d => ___d[1]___) ~~~ または、分割を使って下の行のように書きます。 ~~~js selection .data(~~~d => d.values~~~) .data(___([, values]) => values___) ~~~ *nest*.sortKeysや*nest*.sortValuesメソッドを置き換えるには、d3.group**s**を使う必要があるかもしれません。 d3.groupsは、mapを[key, value]ペアの配列として返します。この配列は次のようにソートできます。 ~~~js d3.groups(data, d => d.key) .___sort((a, b) => d3.ascending(a[0], b[0])___; // keyを昇順ソート d3.groups(data, d => d.key) .___sort((a, b) => d3.ascending(d3.sum(a[1]), d3.sum(b[1]))___; // 値の合計を昇順ソート ~~~ このほか、より強力なアプローチとして、d3.groupが返す結果に[d3.hierarchyを適用する](https://observablehq.com/d/9a453665f405eebf)方法があります。この方法ではソートだけでなく、あらゆるツリー探索テクニックが使えます。 d3.nestのrollupメソッドは、d3.rollupに置き換えられます。（配列形式ではd3.rollup**s**を使います） ~~~js ~~~d3.nest()~~~.key(d => d.key).rollup(v => v.length).entries(data); ~~~ 次のように書きます。 ~~~js ___d3.rollup___(data, v => v.length, d => d.key); ~~~ 興味深いサンプルとして、 https://observablehq.com/@d3/cascaded-treemap を参照してください。なお、d3.nestを使用した複雑なアプリケーションを開発している場合、d3-collectionを独立したモジュールとして読み込むことが可能です。 `35:[] 2f:{"title":"D3 6.0 migration guide in Japanese","cells":[{"id":0,"value":"md`# D3 6.0 migration guide in Japanese\n### D3 6.0 移行ガイド日本語訳`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"es2015 = mdh`## ES2015への移行\n\nD3は**ECMAScript 2015** (**ES6**)を全面的に採用しました。\nD3のコードベースは、イテレータやアロー関数などES2015の新機能を使用するように徐々に移行しています。\n\nこの変更を明示するため、D3のすべてのモジュールをメジャーバージョンアップしています。\nすべてのモジュールにあえてES6構文を導入したことで、ES5を想定しているビルドツールが直ちに警告を出すようになります。\n\nつまりD3@6は、古いブラウザとの互換性を維持しません。\n開発者は[babel](https://babeljs.io/setup)などのトランスパイレーションツールを使うことができます。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"collection = mdh`**d3-collection**はES2015のネイティブ機能に置き換えられました。\n\nたとえば以下のコードは、\n~~~js\n var map = ~~~d3.map~~~()\n .set(\"foo\", 1)\n .set(\"bar\", 2);\n map.get(\"foo\"); // 1\n~~~\n\n次のように書くか、\n~~~js\n const map = ___new Map___()\n .set(\"foo\", 1)\n .set(\"bar\", 2);\n map.get(\"foo\"); // 1\n~~~\n\n次のように書きます。\n~~~js\n const map = ___new Map___([[\"foo\", 1], [\"bar\", 2]]);\n map.get(\"foo\"); // 1\n~~~\n\nネイティブのMapオブジェクトは反復可能 (iterable) で、D3のセレクションや他のメソッドと一緒に使えます。\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"map = new Map([[\"foo\", 1], [\"bar\", 2]]) // Mapを作成","pinned":true,"hidden":false,"mode":"ojs"},{"id":238,"value":"// Mapから要素を作成\ncircles = d3\n .create(\"svg\")\n .selectAll(\"circle\")\n .data(map)\n .join(\"circle\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"circles.size()","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"// セレクションのデータからMapを作成\nnew Map(circles.data())","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"mdh`同様に、d3.setはSetに、d3.keysはObject.keysに、d3.valuesはObject.valuesに、d3.entriesはObject.entriesに置き換えられます。\n\nこれらのメソッドとJSのネイティブとの大きな違いは、非推奨となった[d3-collection](https://github.com/d3/d3-collection/blob/master/README.md#maps)のドキュメントにくわしく説明してあります。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"md`## ブラシ、ドラッグ、ズームイベント\n\n新しいイベントシステムは、d3-selectionだけでなく、d3-drag、d3-brush、d3-zoomなどのリスナー全体に適用されます。\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"event_drag = mdh`\n**d3.drag**では、以前はこのような[ドラッグハンドラが一般的](https://observablehq.com/@d3/drag-svg-voronoi-clipped)でした。\n~~~js\n d3.drag()\n .on(\"start\", ~~~(d)~~~ => circle.filter(p => p === d).raise().attr(\"stroke\", \"black\"))\n .on(\"drag\", ~~~(d)~~~ => (d.x = ~~~d3.event~~~.x, d.y = ~~~d3.event~~~.y))\n .on(\"end\", ~~~(d)~~~ => circle.filter(p => p === d).attr(\"stroke\", null))\n~~~\n\nこれからは次のように書きます。\n~~~js\n d3.drag()\n .on(\"start\", ___(event, d)___ => circle.filter(p => p === d).raise().attr(\"stroke\", \"black\"))\n .on(\"drag\", ___(event, d)___ => (d.x = ___event___.x, d.y = ___event___.y))\n .on(\"end\", ___(event, d)___ => circle.filter(p => p === d).attr(\"stroke\", null))\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"event_zoom = mdh`\n**d3.zoom**では、以前はこのような[ズームハンドラが一般的](https://observablehq.com/@d3/drag-zoom)でした。\n~~~js\n function zoomed(d) {\n g.attr(\"transform\", ~~~d3.event~~~.transform);\n }\n~~~\n\nこれからは次のように書きます。\n~~~js\n function zoomed(___event___, d) {\n g.attr(\"transform\", ___event___.transform);\n }\n~~~\n\nまたは、\\`event\\`を分割します。\n~~~js\n function zoomed(___{transform}___, d) {\n g.attr(\"transform\", transform);\n }\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"pointer = mdh`## マウス、タッチ\n\n結果として、マウスイベントやタッチイベントの位置を読み取る方法も変更されました。\n**d3.mouse**、**d3.touch**、**d3.touches**、**d3.clientPoint**の各関数は削除され、\n[d3.pointer](https://github.com/d3/d3-selection/blob/master/README.md#pointer)に置き換えられました。\nマルチタッチをサポートしたい場合は、[d3.pointers](https://github.com/d3/d3-selection/blob/master/README.md#pointers)を使います。\n\nたとえば、次のコードは、\n~~~{js}\n selection.on(\"mousemove\", function() {\n … ~~~d3.mouse~~~(this) …\n })\n~~~\n\nこのようになります。\n~~~{js}\n selection.on(\"mousemove\", (___event___) => {\n … ___d3.pointer___(___event___) …\n })\n~~~\n\n（d3.pointerは、削除されたd3.clientPointメソッドの強化版です。）\n\nよりくわしいサンプルは、[Multitouch done right](https://observablehq.com/@d3/multitouch)を参照してください。\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"bin = mdh`## d3.histogramはd3.binに\n\nこれは、完全に同じAPIの名前を変更しただけです。\n\n~~~js\n ~~~d3.histogram~~~(…)\n~~~\n\n次のように書きます。\n~~~js\n ___d3.bin___(…)\n~~~\n\n(d3.histogramは非推奨のエイリアスとしてまだ存在しています)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"leastIndex = mdh`## d3.scanはd3.leastIndexに\n\n[d3.leastIndex](https://github.com/d3/d3-array/#leastIndex)はd3.scanとまったく同じです。\n\n~~~js\n d3.~~~scan~~~([2, 0, 3]); // 1\n~~~\n\n次のように書きます。\n~~~js\n d3.___leastIndex___([2, 0, 3]); // 1\n~~~\n\nただし、データに比較可能な要素がない場合、d3.leastIndexは\\`undefined\\`ではなく\\`—1\\`を返します。\n\n~~~js\n const i = d3.~~~scan~~~([{a:1}, {a:2}, {a:0}], d => d.b);\n if ~~~(i === undefined)~~~ { return \"not found!\"; }\n~~~\n\n次のように書きます。\n\n~~~js\n const i = d3.___leastIndex___([{a:1}, {a:2}, {a:0}], d => d.b);\n if ___(i < 0)___ { return \"not found!\"; }\n~~~\n\nこのような状況は、データ配列が空の場合に発生する可能性があります。\n~~~js\n d3.scan([]); // undefined\n d3.leastIndex([]); // -1\n~~~\n\n(d3.scanは非推奨メソッドとしてまだ存在しています)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"delaunay = mdh`## VoronoiはDelaunayに\n\n[d3-voronoi](https://github.com/d3/d3-voronoi)モジュールは廃止されました。\nその代わり、d3@6はより高速で堅牢な[d3-delaunay](https://github.com/d3/d3-delaunay)モジュールをバンドルしました。\n\nしかし、変更点を簡単にまとめることはできません。\nアルゴリズム、データ構造、APIが変わりました。\n新しいd3.Delaunayのドキュメントは網羅的で、この「[Voronoi labels](https://observablehq.com/@d3/voronoi-labels)」ノートブックのような[多くのサンプル](https://observablehq.com/collection/@d3/d3-delaunay)があります。\n\n簡単なユースケースとして、次のコードがあります。\n\n~~~js\nconst cells = ~~~d3.voronoi~~~()\n .extent([[-1, -1], [width + 1, height + 1]])\n .polygons(~~~data~~~)\n~~~\n\n次のように書きます。\n\n~~~js\nconst delaunay = ___d3.Delaunay.from(data)___\nconst voronoi = delaunay.voronoi([-1, -1, width + 1, height + 1])\nconst cells = voronoi.cellPolygons(); // イテレータ\n~~~\n\nなお、従来のd3-voronoi APIを使用した複雑なアプリケーションを開発している場合、d3-voronoiを独立したモジュールとして読み込むことが可能です。\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"interpolateTransformCss = mdh`## d3.interpolateTransformCssは厳格に\n\n[d3.interpolateTransformCss](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolateTransformCss)は、ノードにバインドされる必要のないトランスフォームを操作するためにDOMMatrixを使用するようになりました。\nその結果、相対的な長さ (*em*など) で定義されたトランスフォーム間の補間は許可されなくなり、エラーが投げられます。\n\n~~~js\n const interpolator = d3.interpolateTransformCss(\n \"translateY(~~~80%~~~) scale(2)\",\n \"translateX(~~~3em~~~) rotate(5deg)\"\n );\n~~~\n\nこれからは絶対的な長さに変換されるようにしなければいけません。\n\n~~~js\n const interpolator = d3.interpolateTransformCss(\n \"translateY(___800px___) scale(2)\",\n \"translateX(___30px___) rotate(5deg)\"\n );\n~~~\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"minus = mdh`## d3-formatはユニコードのマイナスを使用するように\n\nマイナス記号は、“hyphen-minus” (U+002D)ではなく、ユニコード文字の“minus” (U+2212) でフォーマットします。\nその結果、タイポグラフィ的に正しくレンダリングできます (“−10” vs “-10”)。\nハイフンマイナスにしたい場合は、\n[d3.formatLocale](https://github.com/d3/d3-format/blob/master/README.md#formatLocale)または[d3.formatDefaultLocale](https://github.com/d3/d3-format/blob/master/README.md#formatDefaultLocale)\nを使用してください。\n\n~~~js\n d3.formatDefaultLocale({\n thousands: \",\",\n grouping: [3],\n ___minus: \"-\",___\n currency: [\"$\", \"\"]\n })\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":564,"value":"md`---\n## 付記\n\n[Guillaume Levrier](/@guillaume-levrier)の助言に感謝します。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":567,"value":"// 黄色とピンクのハイライトつきのmarkdown\nmdh = {\n const hljs = window.hljs || (await require(\"@observablehq/highlight.js\"));\n\n return function() {\n const node = md(...arguments);\n for (const fragment of node.querySelectorAll(\"code\")) {\n hljs.highlightBlock(fragment);\n\n fragment.innerHTML = fragment.innerHTML.replace(\n /___(.*?)___/g,\n '$1'\n );\n fragment.innerHTML = fragment.innerHTML.replace(\n /~~~(.*?)~~~/g,\n '$1'\n );\n }\n\n return node;\n };\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}