颜色栏未显示在地图顶部（使用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);
  });
}

问题是在传单地图上什么都没有显示。有人对此有解决方案吗？谢谢您的帮助。