Javascript 不确定条形图中的边距来自何处

我有一个条形图，显示了四个叠加的值，如下所示：

在我的条形图中，我似乎在每个条中都有某种程度的余量，使其延伸得比预期的要远，从控制台中可以看出，紫色条应该是1000，但实际上比这个稍多，或者从总数中可以看出，这也有同样的问题。我已经通过使用零作为一个值确认了这一点，它仍然显示一个小条，即使它是零。我想删除或者至少减少这个边距，这样我的条形图就更准确了

以下是源代码：

bars
    .enter()
    .append('rect')
    .attr("class", "myBars" + function (d) {
        return d.colour;
    })
    .attr({
        height: 30,
        y: 20,
        x: function (d) {
            return barMARGINS.left + d.x;
        },
        width: function (d) {
            return d.value;
        }
    })

下面是完整的代码：

编辑

---

以下是紫色条长度应为零的示例。

您正在使用

yRange2

计算截面的

宽度，其定义如下：

yRange2 = d3.scale.linear()
    .domain([0, 10])
    .range([barMARGINS.bottom, canvas.height - barMARGINS.top]);

请注意，
范围
不从0开始，因此
yRange2（0）==10

我真的不知道为什么要使用这种特殊的比例（特别是：
barMARGINS.bottom
）

因此，您可以将范围更改为类似
.range（[0，…]）
，但请注意，随后您必须更改一些其他边距等

老实说，您可能希望稍微清理一下代码，这样就不会一次又一次地（在不同的控件上）使用相同的更新函数，从而使调试更容易。对于边距，我通常对图表/组应用
transform=translate（…）
，因为比例不会受到影响（我从0开始，不必关心边距）

我希望这有帮助
 嗯。。。这不就是：
returnbarmargins.left+d.x看起来问题实际上是轴上的文本没有正确地与条对齐-您可以看到2000不在右端。我会对照x轴的宽度检查条形图的宽度。@CoolBlue是的，这是将条形图移过x轴的边距。我想知道的是，为什么钢筋本身的厚度会增加到宽度上。我将添加另一张图片来说明我的想法mean@zacran实际上，我应该提到条形图的比例是总数的11/10，因此，这里有一些空白，也有助于说明手头的问题。我已经修复了这个我的源代码，包括更新功能，但忘记了更新链接，所以这里有什么原因，为什么范围与此有关，当它决定的是条形图的长度时？我不确定我是否理解你链接的例子，你还有紫色条，不是吗？无论如何，比例（在您的例子中是线性的）将域映射到范围。因此，您将其用于宽度，因此，如果您有域（0,1）和范围（1,11），则将0映射到1或0.5映射到6。因此，如果该值为0，则得到正宽度，这里的情况似乎是这样，如
barMARGINS.bottom
为>0。这回答了你的问题吗？我的意思是我修复了混乱的代码，而不是问题。我现在明白你的意思了，但我认为通过边距来抵消范围是为了避免用轴剪切？很抱歉@gamehen的回答太晚了，最近有点忙。我很快在这里举了一个例子：告诉你如何定义一个比例，一个轴，而不把边距混入这些东西中。您可以看到，我只定义了一个轴、一个比例，然后可以轻松地更改边距等。除此之外，我可以看到您的代码中有多个相同代码块的实例（或类似的实例），这通常是一个迹象，表明您可以潜在地改进（“缩短”）功能等。对不起，现在没有时间调查细节！希望你能成功！