[Solved]-How to remove white line in d3.js legnd-d3.js

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.