javascript - 颜色条没有显示在我的地图顶部（使用 d3 的传单）

Question

我正在尝试显示一个彩条（它是我的地图图层的图例）。我通过结合 d3 和传单来做到这一点。这是我目前的实现。

var map = L.map('map', {
        center: [19.2436590371, 96.8861699425],
        zoom: 9,
        minZoom: 4,
        maxZoom: 9,
        layers: [osm, lyr1] // These are some generated layers
});

// Add tile layers for my map ....

let svg = d3.select(map.getPanes().overlayPane).append('svg').attr('id', 'svg');
length = 100;
color = d3.scaleLinear().domain([1, length])
        .interpolate(d3.interpolateHcl)
        .range([d3.rgb("#007AFF"), d3.rgb('#FFF500')]);

for (var i = 0; i < length; i++) {
  svg.append('div').attr('style', function (d) {
     return 'background-color: ' + color(i);
  });
}

问题是传单地图上没有显示任何内容。有没有人解决这个问题？谢谢你的帮助。

标签： javascriptd3.jsleaflet