javascript - 色付きの世界地図に凡例を追加する

Question

こんにちは仲間のプログラマー！インタラクティブなワールドマップに凡例を追加しようとしていますが、失敗します。どの機能を使用する必要がありますか? 今まで、私が試したことはすべて何も表示されませんでした。どんな助けでも大歓迎です！ありがとう！

世界地図コード:

new Datamap({
  scope: 'world',
  done: function(datamap) {
    datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
      var country = geography.id
      window.country = country
      console.log(country);
      ScatterCorruption()
      Barchart()
  });
},
element: document.getElementById('container1'),
fills: {
 A: '#c6dbef',
 B: '#9ecae1',
 C: '#6baed6',
 D: '#4292c6',
 E: '#2171b5',
 F: '#08519c',
 G: '#08306b',
 defaultFill: 'grey' 
},
geographyConfig: {
    borderColor: 'rgba(255,255,255,0.3)',
    highlightBorderColor: 'rgba(0,0,0,0.5)',
    popupTemplate: function(geo, data) {
      return data && data.GDP ?
      '<div class="hoverinfo"><strong>' + geo.properties.name + '</strong><br/>GDP: <strong> $ ' + data.GDP + '</strong></div>' :
      '<div class="hoverinfo"><strong>' + geo.properties.name + '</strong></div>';
  }
},
data: {
    "ABW": {
        "country": "Aruba",
        "fillKey": "No data",
        "GDP": "No data"
    },
    "AND": {
        "country": "Andorra",
        "fillKey": "No data",
        "GDP": "No data"
    },
    "AFG": {
        "country": "Afghanistan",
        "fillKey": "D",
        "GDP": "20038215159.39"
    },
    "AGO": {
        "country": "Angola",
        "fillKey": "No data",
        "GDP": "No data"
    },
    "ALB": {
        "country": "Albania",
        "fillKey": "D",
        "GDP": "13211513725.59"
    },
    "ARE": {
        "country": "United Arab Emirates",
        "fillKey": "E",
        "GDP": "399451327433.63"
    },
...
},
});