不知道条形图中的条形边距来自何处

Question

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

在我的条形图中，我似乎在每个条形图中都有某种边距，使其延伸得比预期的更远，正如在控制台中可以看到的那样，它指出紫色条应为1000时＃＆＃ 39; s实际上比这更多，或者可以看出总数，它有同样的问题。我已经通过使用零作为值来确认这种情况，即使它为零，它仍然显示一个小条。我想删除或至少减少这个边距，以便我的条形图更准确一些。

这是源代码：

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;
        }
    })

以下是完整的代码：http://jsfiddle.net/gamea12/tLrpe3zk/

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

Answer 1

您正在使用yRange2来计算各个部分的width，其定义如下：

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

请注意，range 不从0开始，因此yRange2(0) === 10。

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

因此，您可以将范围更改为.range([0, ...])，但请注意，您必须更改其他边距等。

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

我希望这有帮助！