javascript - 以负值开头的 d3.js 栏

Question

所以我在屏幕上有类似这张图片的东西:

我查看了创建条形图的示例，但我遇到的问题是从负值到零再到正值绘制图表。我想知道每一行是否应该是 3 条(负到零，平均虚线矩形，然后从平均值到最大值)。

这有点像烛台图，但它是水平的。

如有任何帮助，我们将不胜感激。

这是我迄今为止取得的成就的 fiddle :http://jsfiddle.net/jLjPz/

Answer 1

我修改了您的 jsfiddle，使其看起来与您提供的图片相似。关于我的更改需要注意的几点:

http://jsfiddle.net/jLjPz/3/

对于线性刻度，您可以将负数和正数输入数组。因此，您不应使用 .domain([0,100])，而应使用 .domain([-100,100])。

您可以使用此比例来映射您的 d[0] 和 d[1] 以便在绘制矩形时，它会显示为与您的轴正确调整大小。

最后，我做了一些数学运算来获取您的 [start, width] 值，使它们能够很好地适应比例尺。

x(d[0]) 是每个矩形的正确缩放位置左侧。
x(d[1]+d[0])-x(d[0]) 是每个矩形的正确缩放宽度。
x(d[1]+d[0])-x(d[0]))/2+x(d[0]) 是正确缩放的矩形中点。

希望这对您有所帮助!