D3.js D3js堆叠条形图宽度不合适

我试着做一个D3条形图，这里的条形图是水平的&它的宽度应该是百分比。但我对它的宽度还有一些问题。我创造了一把小提琴。 在这里你们可以看到宽度不合适，同时它在y轴上并没有对齐

在这里，它与已执行的放置数量堆叠在一起。这里执行的是放置的子集，&放置的是数量的子集

这里是我从Ajax调用中得到的数据。在函数getRanges中，我正在准备一个条数组，它返回的是

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

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

有些人认为这是一个错误的方向。可能是我的比例不合适或数据集不正确。我必须得出的最终结果如下

---

现在我需要一些帮助，至少在酒吧对齐。有人能帮我吗

我想你需要在水平方向上画一个堆叠的条形图

---

您正在创建但未使用

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轴，您可能希望切换到，因为您的示例看起来像是离散的类别，而不是数字范围

---

这会让你成功。

提示：“不恰当”假设每个人都同意并知道“恰当”是什么。我建议你描述一下你想要什么和你期望什么，然后（即使你有一把小提琴）描述一下你看到的不同的东西。谢谢马克，你的评论帮助我理解我错过了什么。