d3.js：正確獲取條寬或X位置？

Question

我在使用d3.js實現的條形圖中出現了一個奇怪的問題：每個矩形之間的1 px填充看起來不規則。我收集寬度或x位置都是罪魁禍首，但我不明白我在做什麼錯誤：寬度是svg區域的一部分，X位置是通過D3比例獲得的。

我已經把這裏演示：http://jsfiddle.net/pixeline/j679N/4/

代碼（秤）controling 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.這是因爲實際的位置是一個小數值，最終在某些情況下以一種方式四捨五入，而在其他情況下以其他方式四捨五入。

可以減輕影響，但改變rangeRound到range，但不會消除它完全爲你仍然會得到分數像素值的位置。要做的最好的事情可能是簡單地增加填充，使差異不那麼明顯。