D3js堆积条形图宽度不合适

Question

我试图制作一个D3条形图，这里的横条是水平的＆amp;它的宽度应该是百分比。但我的宽度还有一些问题。我创造了一个小提琴@ link。 在这里你可以看到宽度不合适，同时它在y轴上不对齐。

这里堆放着执行放置的数量。这里执行的是放置的子集，＆amp;放置是数量的子集。

这里barData m来自Ajax调用。在函数getRanges我准备一个条形数组，它返回我是

[[bar1 start point, bar1Length],[bar2 start point, bar2Length],[bar3 start point, bar3Length]];

此数据仅在forEach内部迭代以创建条形。

一些如何走向错误的方向。可能是我的规模不合适或数据集。我必须提出的最终输出为。

现在我需要一些关于条形对齐的帮助。谁能帮我？

Answer 1

我认为你需要在水平方向上绘制一个堆积的条形图

http://tributary.io/inlet/4966973

Answer 2

您正在创建但未使用d3.scale.linear()比例来放置数据。您的x和y变量是将数据映射到像素位置的函数。例如，您的条形宽度为

 .attr("width", function (d, i) {
    return d[1] * 100; // what's the magic 100?
 })

这应该是：

.attr("width", function(d, i) {
    return x(d[1]);
})

要在y轴上放置值，您有：

.attr("transform", "translate(" + margin.l + "," + (margin.t + (30 * j)) + ")")

使用y缩放它

.attr("transform", "translate(" + margin.l + "," + (y(j) + margin.t - 25/2) + ")") // this will center the bar on the tick

此外，对于y轴，您可能希望切换到ordinal scales，因为示例看起来像谨慎的类别，而不是数字范围。

Here's a few changes让你前进。