D3.js
概要
D3.jsは、データをDOM要素にバインドすることでカスタムのインタラクティブなデータ可視化を構築するための低レベルJavaScriptライブラリです。スケール、軸、図形ジェネレーター、地理投影、フォースシミュレーション、階層レイアウトを提供し、開発者に視覚出力の完全な制御を与えます。また、計算されたスケールやレイアウトを通じてReactと統合することができます。
指示
- データをバインドする際は、
．data（dataset）.join（"element"）（D3 v6以上）を使用してenter/update/exitパターンを実装し、アクセサ関数を介してバインドされたデータから属性やスタイルを設定します。 - スケールを作成する際は、適切なタイプ（連続データには
scaleLinear、カテゴリカルな棒にはscaleBand、日付にはscaleTime、色のマッピングにはscaleOrdinal）を選択し、必ずd3.extent()を使ってデータからドメインを設定します。 - 軸を構築する際は、
d3.axisBottom（scale）またはd3.axisLeft（scale）で作成し、d3.format()で目盛りを設定してラベルをフォーマットし、リサイズ時に再生成します。 - チャートタイプを作成する際は、図形ジェネレーター（
d3.line()、d3.area()、d3.arc()、d3.pie()、d3.stack()）やレイアウト関数（d3.treemap()、d3.forceSimulation()、d3.geoPath()）を複雑な可視化に使用します。 - インタラクティビティを追加する際は、スムーズなデータ更新にはトランジション（
.transition().duration(750)）、ホバー時のツールチップ、探索のためのブラッシング/ズームを使用します。 - Reactと統合する際は、D3を数学的な処理（スケール、レイアウト、データ変換）に使い、ReactをDOMレンダリングに使用します。
useMemoで値を計算し、D3駆動のアニメーションにはuseEffectとrefを使用します。
例
例1：複数のチャートタイプを持つリアルタイムダッシュボード
ユーザーリクエスト： 「APIデータから折れ線グラフ、棒グラフ、円グラフを含むダッシュボードを作成してください」
アクション：
- X軸に
d3.scaleTime()、Y軸にd3.scaleLinear()を使用して共有スケールを設定する - スムーズな曲線補間とエリアフィルを備えた
d3.line()で折れ線グラフを構築する - グループ化された棒グラフを
d3.scaleBand()と段階的なエンタートランジションで構築する - ドーナツグラフを
d3.pie()とd3.arc()で構築し、ホバー時にツールチップを表示する
出力： データが変更されるとスムーズに更新されるアニメーション付きのレスポンシブダッシュボード。
例2：フォース指向ネットワークグラフの作成
ユーザーリクエスト： 「エンティティ間の関係をインタラクティブなネットワークグラフとして可視化してください」
アクション：
d3.forceSimulation()をforceManyBody、forceLink、forceCenterとともにセットアップする- ノードを円としてレンダリングし、
d3.scaleOrdinal()でカテゴリごとに色付けする d3.drag()でドラッグインタラクションを追加してノードを再配置可能にするd3.zoom()でズームとパンを実装し、ホバー時にツールチップを表示する
出力： ドラッグ可能なノード、色分けされたカテゴリ、ズームナビゲーションを備えたインタラクティブなフォース指向グラフ。
ガイドライン
- D3はスケール、レイアウト、データ処理に使用し、ReactアプリではReactにDOMレンダリングを任せましょう。
- 手動のenter/update/exitではなく
.join()を使用して、よりシンプルでクリーンなデータバインディングを実現しましょう。 - スケールのドメインは常にデータから設定（
d3.extent()）し、ハードコードしないでください。 - 軸ラベルやツールチップには
d3.format()を使用します：千単位には",.0f"、通貨には"$.2f"。 - スムーズなデータ更新アニメーションには、
easeCubicInOutで750msのトランジションを追加しましょう。 ResizeObserverコールバックでスケールを再計算することで、可視化をレスポンシブにしましょう。- SVG要素に
aria-labelと意味のある<title>タグを追加して、アクセシビリティを確保しましょう。