如何去除 d3.js 图例中的白线

Question

如何删除 d3.js 图例中的白线 (space)？我正在定义一个色阶范围，它工作得很好，除了它在值之间添加了白线空间。这是一个例子 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 的高度，并且要为放置每个图例的位置计算 y 属性基于 intervalHeight 的块，但是，您 四舍五入 计算出 y 属性，这有时会使 y 值高于应有的值是，造成差距。

要解决此问题，您可以将 y 修改为

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

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

.attr("height", intervalHeight + 1)

这样一来，每个条的高度有点高了，但无论如何都会被下一个遮盖。唯一的视觉差异是白色间隙不再存在。

如何去除 d3.js 图例中的白线

How to remove white line in d3.js legnd

javascript

d3.js

leaflet