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);
  });
}

問題は、リーフレット マップの上に何も表示されないことです。これに対する解決策はありますか？助けてくれてありがとう。