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，但这并不能完全消除它，因为您仍会获得位置的小数像素值。最好的办法可能是简单地增加填充，以便差异不那么明显。