javascript - 不确定条形图中条形图的边距来自哪里

Question

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

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

这里是源代码:

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

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

我真的不知道你为什么使用这个特定的比例(特别是:barMARGINS.bottom)

因此，您可以将范围更改为类似 .range([0, ...]) 的内容，但请注意，您随后必须更改其他一些边距等。

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

希望对您有所帮助!