如何绘制垂直面积图？

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 : 基线