[英]How to draw a vertical area chart?
In fact, as you say, most of examples of area charts (I'd say virtually all of them) use a horizontal area, that is, a version where the baseline is horizontal.事实上,正如您所说,大多数面积图示例(我会说几乎所有)都使用水平区域,即基线水平的版本。
However, it's very easy to create a vertical area chart (that is, with a vertical baseline) using D3.但是,使用 D3 创建垂直面积图(即具有垂直基线)非常容易。 To do so, one has to use the way less known
x1
and x0
methods of the area generator .为此,必须使用区域生成器的鲜为人知的
x1
和x0
方法。
What happens is that, since almost all examples online are horizontal area charts, you only see x
, y1
and y0
as the methods of the area generator.发生的情况是,由于几乎所有在线示例都是水平面积图,您只能看到
x
、 y1
和y0
作为面积生成器的方法。 However, the same way x
alone sets x0
to the value and x1
to null
, y
sets y0
to the value and y1
to null
.然而,同样的道理
x
单独设置x0
的价值和x1
至null
, y
套y0
的价值和y1
至null
。
That being said, you just need to set the vertical baseline with x0
.话虽如此,您只需要使用
x0
设置垂直基线。 Check this example:检查这个例子:
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>
In short, these are the methods you need:简而言之,这些是您需要的方法:
Horizontal area chart :水平面积图:
x
: position in the baseline x
: 在基线中的位置y1
: distance from baseline y1
: 与基线的距离y0
: baseline y0
: 基线Vertical area chart :垂直面积图:
y
: position in the baseline y
: 在基线中的位置x1
: distance from baseline x1
: 与基线的距离x0
: baseline x0
: 基线
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.