svg - d3.js：获取条形宽度或 X 位置对吗？

Question

我在使用 d3.js 实现的条形图中有一个奇怪的问题：每个矩形之间的 1 px 填充看起来不规则。我收集宽度或 x 位置中的一个或两个是罪魁祸首，但我不明白我做错了什么：宽度是 svg 区域的一小部分，X 位置是通过 D3 比例获得的。

我在这里放了一个演示：http: //jsfiddle.net/pixeline/j679N/4/

控制 x 位置的代码（刻度）：

var xScale = d3.time.scale().domain([minDate, maxDate]).rangeRound([padding, w - padding]);

控制宽度的代码：

 var barWidth = Math.floor((w/dataset.length))-barPadding;

感谢您的见解。

Answer 1

这是不规则的，因为您正在四舍五入您的输出范围 ( rangeRound)。在某些情况下，两个条形之间的距离是 3 个像素，有时只有 2 个像素。这是因为实际x位置是一个小数值，在某些情况下会以一种方式舍入，而在其他情况下会以另一种方式舍入。

您可以减轻效果，但更改rangeRound为range，但这不会完全消除它，因为您仍然会获得位置的小数像素值。最好的办法可能是简单地增加填充，以使差异不那么明显。