如何繪制垂直面積圖？

Question

如何在d3中繪制垂直區域？ 就像我用紅色畫的一樣：

這里最好的方法是什么？ 我在互聯網上找不到任何示例。

Answer 1

事實上，正如您所說，大多數面積圖示例（我會說幾乎所有）都使用水平區域，即基線水平的版本。

但是，使用 D3 創建垂直面積圖（即具有垂直基線）非常容易。 為此，必須使用區域生成器的鮮為人知的x1和x0方法。

發生的情況是，由於幾乎所有在線示例都是水平面積圖，您只能看到x 、 y1和y0作為面積生成器的方法。 然而，同樣的道理x單獨設置x0的價值和x1至null ， y套y0的價值和y1至null 。

話雖如此，您只需要使用x0設置垂直基線。 檢查這個例子：

 const svg = d3.select("svg"); const data = [0, 80, 20, 210, 130, 270, 30, 110, 130, 0]; const areaGenerator = d3.area() .x0(0) .x1(d => d) .y((_, i) => i * 15) .curve(d3.curveMonotoneY) const area = svg.append("path") .attr("d", areaGenerator(data)) .style("fill", "teal");

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <svg></svg>

簡而言之，這些是您需要的方法：

水平面積圖：

• x : 在基線中的位置
• y1 : 與基線的距離
• y0 : 基線

垂直面積圖：

• y : 在基線中的位置
• x1 : 與基線的距離
• x0 : 基線