如何删除d3.js legnd中的白线

Question

如何删除d3.js图例中的白线(空格(？我正在定义一个色度范围，它工作得很好，只是在值之间添加了白线。下面是一个例子https://jsfiddle.net/aba2s/u46xoh97/1/

function drawLinkLegend(colorscale, min, max) {
linkLabel.style.display = 'block'
var legendWidth = 100
legendMargin = 10
legendLength = document.getElementById('legend-links-container').offsetHeight - 2*legendMargin
var legendSvg = d3.select('#legend-links-svg')
.append('g')
.attr("id", "linkLegendSvg");
var dif = colorscale.domain()[1] - colorscale.domain()[0];
var intervals = d3.range(400).map(function(d,i) {
return dif * i / 400 + colorscale.domain()[0]
})
intervals.push(colorscale.domain()[1]);
var intervalHeight = legendLength / intervals.length;    
var bars = legendSvg.selectAll(".bars")
.data(intervals)
.enter().append("rect")
.attr("class", "bars")
.attr("x", 0)
.attr("y", function(d, i) { return Math.round((intervals.length - 1 - i)  * intervalHeight) + legendMargin; })
.attr("height", intervalHeight)
.attr("width", legendWidth-50)
.style("fill", function(d, i) { return colorscale(d) })
.attr("stroke-width",0)
var legendAxis = d3.scaleLinear()
.domain([min, max])
.range([legendLength, 0]);
legendSvg.append("g")
.attr("class", "legend axis")
.attr("transform", "translate(" + (legendWidth - 50) + ", " + legendMargin + ")")
.call(d3.axisRight().scale(legendAxis).ticks(10))
}

Answer 1

白线是从白色背景中混合而来的，每个元素的高度都太小了，或者svg无法呈现小数点高度，然后背景出现在前面。

你可以用(四舍五入(：来解决这个问题

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

https://jsfiddle.net/falkedesign/1am0b3xu/

Answer 2

创建图例时，您为每个图例色块设置高度intervalHeight，并根据该intervalHeight计算每个图例块的放置位置y属性，但是，您对计算出的y属性进行了舍入，这有时会使y值高于应有值，从而产生间隙。

为了解决这个问题，您可以将y修改为

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

没有舍入，或者我发现的一个巧妙的解决方案是将高度稍微调大一点，以弥补设置时的差距

.attr("height", intervalHeight + 1)

这样，每个酒吧的高度都有点太高了，但无论如何都会被下一个酒吧掩盖。唯一的视觉差异是白色的缺口不再存在。