如何绘制垂直面积图？

Question

如何在d3中绘制垂直区域？ 像我用红色画的东西：

这里最好的方法是什么？我在互联网上找不到任何示例。

Answer 1

实际上，正如您所说的，大多数面积图示例（实际上我都说过）都使用水平区域，即基线水平的版本。 / p>

但是，使用D3创建垂直面积图（即具有垂直基线）非常容易。为此，必须使用area generator中鲜为人知的x1和x0方法。

发生的事情是，由于几乎所有在线示例都是水平面积图，因此您仅看到x，y1和y0作为面积生成器的方法。但是，用相同的方式x单独将x0设置为值，x1设置为null，y将y0设置为值，{{ 1}}到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：基线