D3js 图例颜色与地图颜色不匹配 javascript

Question

我已经画好了地图。我想使用 d3.js 添加图例。例如，按长度归档时，地图应显示不同的颜色。一个星期以来，我无法完成这项任务。我的地图颜色似乎不错，但图例不匹配。有人可以帮助我绘制 link 函数吗？ https://jsfiddle.net/aba2s/xbn9euh0/12/)

我认为是关于图例函数的错误。这是改变我的地图颜色的函数 Roads.eachLayer(function (layer) {layer.setStyle({fillColor: colorscale(layer.feature.properties.length)})});

function drawLinkLegend(dataset, colorscale, min, max) {
    // Show label
    linkLabel.style.display = 'block'

    var legendWidth = 100
        legendMargin = 10
        legendLength = document.getElementById('legend-links-container').offsetHeight - 2*legendMargin
        legendIntervals = Object.keys(colorscale).length
        legendScale = legendLength/legendIntervals

    // Add legend

    var legendSvg = d3.select('#legend-links-svg')
                .append('g')
                .attr("id", "linkLegendSvg");

    var bars = legendSvg.selectAll(".bars")
      //.data(d3.range(legendIntervals), function(d) { return d})
      .data(dataset)
      .enter().append("rect")
        .attr("class", "bars")
        .attr("x", 0)
        .attr("y", function(d, i) { return legendMargin + legendScale * (legendIntervals - i-1); })
        .attr("height", legendScale)
        .attr("width", legendWidth-50)
        .style("fill", function(d) { return colorscale(d) })

    // create a scale and axis for the legend
    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

D3 期望您的数据数组代表您正在创建的元素。看起来您正在传递所有功能的数组：但您希望您的比例代表间隔。看起来你已经尝试过这种方法，但你还没有完全掌握它。

我们想要访问将提供给秤的最小值和最大值。为此，我们可以使用 scale.domain() 其中 returns 包含域范围、最小值和最大值的数组。

然后我们可以创建一个数据集，其中包含这两个端点之间（包括）之间的值。

最后，我们可以根据视觉尺度的高度除以values/intervals的数量来计算他们需要的高度。

然后我们可以将此信息提供给 enter/update/exit 循环。 enter/update/exit 循环需要数据数组中的一项用于选择中的每个元素 - 因此为什么需要创建一个新数据集。

类似于下面的 shold 作品：

var dif = colorscale.domain()[1] - colorscale.domain()[0];
var intervals = d3.range(20).map(function(d,i) {
    return dif * i / 20 + 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) })

在对现有代码进行故障排除时，您会发现 DOM 中表示比例时元素过多。此外，Object.keys(colorscale).length 不会生成对生成间隔有用的信息 - 比例键不依赖于数据。

eg

D3js 图例颜色与地图颜色不匹配 javascript

D3js legend color does not match to the map color javascript

javascript

jquery

d3.js

leaflet

folium