d3-shape

可視化は、シンボル、円弧、線、エリアなどの離散的なグラフィカルマークで表現できます。棒グラフの長方形が単純な場合もありますが、丸みを帯びた環状セクターやCatmull–Romスプラインなど、他の形状は複雑です。d3-shapeモジュールは、さまざまな形状ジェネレーターを提供して利便性を高めます。

D3の他の側面と同様に、これらの形状はデータによって駆動されます。各形状ジェネレーターは、入力データが視覚表現にどのようにマッピングされるかを制御するアクセサーへのアクセスを提供します。たとえば、スケーリングを使用してデータのフィールドをチャートに合わせて調整することで、時系列の線ジェネレーターを定義できます。

const line = d3.line()
    .x((d) => x(d.date))
    .y((d) => y(d.value));

この線ジェネレーターは、SVGパスの要素のd属性を計算するために使用できます。

path.datum(data).attr("d", line);

または、Canvas 2Dコンテキストにレンダリングするために使用できます。

line.context(context)(data);

以下のいずれかを参照してください。

• 円弧 - 円形または環状セクター（円グラフやドーナツグラフなど）。
• エリア - 上側の線と下側の線で定義されたエリア（エリアチャートなど）。
• カーブ - 点を補間して連続的な形状を生成します。
• ライン - スプラインまたはポリライン（折れ線グラフなど）。
• リンク - ソースからターゲットへのスムーズな三次ベジェ曲線。
• 円グラフ - 円グラフやドーナツグラフの角度を計算します。
• スタック - 隣接する形状を積み重ねます（積み上げ棒グラフなど）。
• シンボル - カテゴリカルな形状エンコーディング（散布図など）。
• 放射状エリア - エリアと同様ですが、極座標を使用します。
• 放射状ライン - ラインと同様ですが、極座標を使用します。
• 放射状リンク - リンクと同様ですが、極座標を使用します。