Accepted answer

When creating your legend, you're setting a height of intervalHeight for each of the legend colour blocks, and you're calculating a y attribute for where to place each of the legend blocks based on that intervalHeight, however, you're rounding that calculated y attribute, which is sometimes making that yvalue higher than it should be, resulting in a gap.

To solve this, you could modify your y to be set to

function(d, i) { return ((intervals.length - 1 - i)  * intervalHeight) + legendMargin; }

without the rounding, or a neat solution I found was to make the height just a little bigger to bridge that gap be setting

.attr("height", intervalHeight + 1)

This way, the height of each bar is a little bit too tall, but it will be masked by the next one anyway. The only visual difference is that the white gap is no longer there.


The white lines are comming from the white background, the height of each element is to small or the svg can't render the decimal height and then the background is comes to the front.

You can fix this with (Up-rounding):

        .attr("height", Math.ceil(intervalHeight))

Related Query