d3

D3

D3.js（d3 またはモジュール単位の d3-*）に関わる作業（データ準備、スケール、シェイプ、セレクション／結合、軸、トランジション、ブラシ／ドラッグ／ズーム、フォース、階層、地理、ドロネー、フレームワークとの連携）では、このスキルを使用してください。

現行のアンブレラ系列は [email protected] として扱ってください（はじめに、API インデックス）。記憶に頼らず、公式の d3js.org モジュールページと npm で解決されたメジャーバージョンを優先してください。D3 は 約 30 個のモジュールからなるツールボックスであり、チャートライブラリではありません。エンコーディングは自分で組み合わせてください（または、独自の D3 が不要な場合は、より高水準のチャートスタックを選んでください）。

ワークフロー

1. コードを変更する前に、ローカル環境の構成を確認します。
   • アンブレラパッケージの d3 と、モジュール単位でインストールされた d3-* のバージョン。TypeScript の場合は @types/d3 / @types/d3-*（DefinitelyTyped）。
   • タスクで必要なのが DOM モジュール（selection、transition、call による axis、brush、drag、zoom）か、純粋な数学処理（array、scale、shape、interpolate、format など）か。
   • レンダリング先：SVG、Canvas（generator.context）、または宣言的 JSX の path／cx／cy 属性。
2. source-map.md から、パッケージの根拠情報とドキュメントの URL を更新します。
3. インストール方法、データ準備、スケール、配色スキーム、色、interpolate については、setup-data-scales.md を使用します。
4. line／area／arc／pie／stack／symbol／link、path、polygon、axis、contour／density、quadtree については、shapes-geometry.md を使用します。
5. hierarchy、force、chord、geo、delaunay／voronoi については、layouts-geo.md を使用します。
6. React／Svelte の DOM 競合ルールを含め、selection／join、brush、drag、zoom、dispatch については、selection-interaction.md を使用します。
7. transitions／ease／timer、フレームワークのガイダンス、本番環境／SSR／canvas、v6 から v7 への注意点、AI による誤りについては、animation-frameworks.md を使用します。

実装上の判断

• タスクに必要な最小限のモジュール構成を優先してください。プロトタイピングでは bun add d3 を使用します。本番用の React チャートでは、多くの場合 d3-scale + d3-shape + d3-array だけで十分です（DOM API を呼び出す場合は selection／axis も追加します）。
• 連続値の y 範囲は反転します（[innerHeight, marginTop]）。SVG の y は下方向に増加します。
• JSX での純粋な数学処理は問題ありません（scale、array、shape の path 文字列、format）。React では、DOM を変更する処理には refs + effects が必要です。対象は selection、selection.call(axis)、transition、brush、drag、zoom です（公式の React ガイダンス）。
• 独自の exit アニメーションが必要な場合を除き、冗長な enter／update／exit よりも、最新の selection.data(data, key).join(...) を優先してください。
• リスナーにはネイティブイベントを渡してください（D3 6 以降）。d3.event はありません。
• 非推奨の d3-voronoi よりも d3-delaunay（Delaunay.from）を優先してください。
• 値をエンコードする階層レイアウトでは、treemap／pack／partition の前に .sum()（通常は .sort() も）を呼び出します。
• Force シミュレーションはティックごとに node.x／node.y を変更します。"tick"（または React state）を使ってレンダリングを行い、アンマウント時には stop() を呼び出してください。
• 帯域幅を使う棒には .bandwidth() を使用します。カテゴリ別の線や散布図には、多くの場合 scalePoint を使用します。curveMonotoneX を使う前にデータをソートしてください。
• d3.nest は使用しないでください（削除済みです）。group／rollup／groups／rollups を使用してください。
• 複数のチャートが同じドキュメントを共有する場合は、クリップ／グラデーション／マーカーに一意の SVG id を使用してください。

検証

リポジトリに既存のチェックがある場合は、そちらを優先してください。D3 に関する重要な変更では、関連する項目を組み合わせて実施します。

• パッケージ／バージョンを確認し、d3@7 またはそれと揃ったモジュールのメジャーバージョンを使用します。TypeScript の場合は @types/d3 を確認します。
• アクセサー、スケールの domain、join のキー型を型チェックします。
• 幅／高さを固定した、決定論的な SVG／Canvas のアサーションを行います（transition ではタイマーをモックし、テストでは force シミュレーションを停止します）。
• これらの API を変更する場合は、brush の domain フィルター、zoom の transform、drag のインタラクションテストを実施します。
• geo、force、hierarchy、contour、またはアンブレラパッケージ全体を追加する場合は、バンドルを監査します。
• 古い D3 からアップグレードする場合は、d3.event、d3.nest、d3.voronoi、React 16 時代のパターンを移行時に確認します。