Chart.js vs D3 vs Recharts: 描画エンジン、柔軟性、React 統合の比較

chart.js、d3、recharts はすべてデータ可視化を実現しますが、内部の仕組みと開発体験は大きく異なります。chart.js は手軽さを重視し、d3 は自由度を重視し、recharts は React との親和性を重視しています。実際の開発現場でどのように違うのか、主要な観点から比較します。

🎨 描画エンジン：Canvas vs SVG

描画方式の違いは、パフォーマンスとカスタマイズ性に直結します。

chart.js は Canvas API を使用します。

• ピクセル単位で描画するため、大量のデータポイントがあっても比較的軽量です。
• 一方で、個々の要素（棒グラフの 1 本など）への DOM アクセスはできません。

// chart.js: Canvas コンテキストを使用
import { Chart } from 'chart.js';

const ctx = document.getElementById('myChart');
new Chart(ctx, {
  type: 'bar',
  data: { /*...*/ },
  options: { /*...*/ }
});

d3 は主に SVG を使用します（Canvas も可能）。

• 各要素が DOM ノードとして存在するため、CSS やイベントリスナーを個別に設定できます。
• 要素数が増えるとパフォーマンスが低下する可能性があります。

// d3: SVG 要素を生成
import * as d3 from 'd3';

const svg = d3.select('#chart').append('svg');
svg.selectAll('rect')
  .data(data)
  .enter().append('rect')
  .attr('width', 20);

recharts は SVG を使用します。

• React コンポーネントとして SVG をラップしています。
• DOM 操作は React 経由で行われるため、直感的ですが d3 ほど細かくは制御できません。

// recharts: React コンポーネントとして描画
import { BarChart, Bar } from 'recharts';

<BarChart width={500} height={300} data={data}>
  <Bar dataKey="value" />
</BarChart>

🔄 データバインディングと更新処理

データが変更された際、どのようにグラフを更新するかも重要な違いです。

chart.js は設定オブジェクトを更新し、明示的に更新を呼び出します。

• 命令的なアプローチです。
• データ配列を書き換えて .update() を呼ぶ必要があります。

// chart.js: データ更新
chart.data.datasets[0].data = newData;
chart.update();

d3 は「Enter-Update-Exit」パターンを使用します。

• データと DOM 要素を紐付け、差分を計算して描画します。
• 非常に強力ですが、コード量は増えます。

// d3: 数据結合と更新
const rects = svg.selectAll('rect').data(newData);
rects.enter().append('rect');
rects.exit().remove();
rects.attr('height', d => d.value);

recharts は React の状態変更に応じて自動で更新されます。

• 宣言的なアプローチです。
• props に新しいデータを渡すだけで再描画されます。

// recharts: 状態変更で自動更新
const [data, setData] = useState(initialData);
// data 状態が変わればグラフも更新される
<BarChart data={data}>...</BarChart>

🛠️ カスタマイズと拡張性

標準機能以外の表現が必要になった場合の対応力です。

chart.js はプラグインシステムを持っています。

• 特定の描画処理をフックして拡張できます。
• 完全に新しいグラフタイプを作るのは難しい場合があります。

// chart.js: プラグインによる拡張
const plugin = {
  id: 'customPlugin',
  afterDraw: (chart) => {
    // Canvas に直接描画
  }
};
Chart.register(plugin);

d3 はほぼ無制限のカスタマイズが可能です。

• 任意の SVG 形状やアニメーションを自由に定義できます。
• 独自のチャートタイプをゼロから構築するのに適しています。

// d3: 自由な形状描画
svg.append('path')
  .datum(data)
  .attr('d', d3.line().x(d => d.x).y(d => d.y));

recharts はコンポーネントの組み合わせで拡張します。

• 既存のコンポーネントを組み合わせるか、カスタムシェープを渡します。
• d3 ほど自由ではありませんが、React らしい書き方ができます。

// recharts: カスタムシェープの使用
<Bar dataKey="value" shape={<CustomShape />} />

⚛️ React 統合の手間

React プロジェクトで使用する際、どのくらいの手間がかかるかです。

chart.js はラッパーライブラリ（例：react-chartjs-2）が必要です。

• 生の chart.js は React のライフサイクルと自動では連動しません。
• useRef や useEffect でインスタンスを管理する必要があります。

// chart.js + React: 手動管理が必要
useEffect(() => {
  const chart = new Chart(ctx, { /*...*/ });
  return () => chart.destroy();
}, []);

d3 は完全な手動管理です。

• React の useRef で DOM を取得し、d3 のコードを実行します。
• React の状態と d3 の状態を同期させるのは開発者の責任です。

// d3 + React: 完全な手動統合
useEffect(() => {
  d3.select(ref.current).selectAll('circle').data(data);
}, [data]);

recharts は React 専用に設計されています。

• 追加のラッパー不要で、そのままコンポーネントとして使えます。
• 状態管理やイベント処理が React の流儀に合っています。

// recharts: 自然な React 統合
<BarChart onClick={(data) => handleClick(data)}>
  {/* そのまま JSX として記述 */}
</BarChart>

📊 比較サマリー

💡 最終的な推奨

chart.js は、手軽に標準的なグラフを導入したい場合 — 特に Canvas のパフォーマンスが必要な場合に最適です。ダッシュボードや管理画面で、複雑なインタラクションよりも表示速度を優先するプロジェクトに向いています。

d3 は、既存のライブラリでは実現できない独自の視覚化が必要な場合に選択します。学習コストは高いですが、技術的な制約几乎なく実装できるため、データジャーナリズムや研究用途、高度な分析ツールに適しています。

recharts は、React プロジェクトで標準的なグラフを宣言的に扱いたい場合に最適です。開発速度と保守性のバランスが良く、多くの Web アプリケーションの要件を満たせます。

結論：まずは recharts（React 使用時）または chart.js（Vanilla JS またはパフォーマンス重視）を検討し、それで要件を満たせない場合のみ d3 の導入を検討するのが現実的な選択です。