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);

請參閱其中之一

• 弧形 - 圓形或環形扇形，如圓餅圖或甜甜圈圖。
• 面積 - 由上界線和基線定義的面積，如面積圖。
• 曲線 - 在點之間插值以產生連續形狀。
• 線條 - 樣條線或折線，如折線圖。
• 連結 - 從來源到目標的平滑三次貝茲曲線。
• 圓餅 - 計算圓餅圖或甜甜圈圖的角度。
• 堆疊 - 堆疊相鄰形狀，如堆疊長條圖。
• 符號 - 分類形狀編碼，如散佈圖。
• 徑向面積 - 類似 面積，但使用極座標。
• 徑向線條 - 類似 線條，但使用極座標。
• 徑向連結 - 類似 連結，但使用極座標。