javascript - 如何使用 JQuery 在 d3 中返回国家代码？

Question

亲爱的程序员 friend 们，

我有一个关于 d3 和 JQuery 的问题。在下面的代码中，我使用数据为从 http://datamaps.github.com/scripts/datamaps-all.js 获取的 d3 世界地图着色。 .我需要确保当用户点击其中一个国家/地区时，它会返回该国家/地区的国家/地区代码(3 个字母，例如:NLD)，以便我可以将其用于其他功能。任何帮助将不胜感激!

$("#container1").datamap({
 scope: 'world',
 done: $(function(datamap) {
  datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
     var countryData = mapData[geography.id];
}),
geography_config: {
 borderColor: 'rgba(255,255,255,0.3)',
 highlightBorderColor: 'rgba(0,0,0,0.5)',
 popupTemplate: _.template([
   '<div class="hoverinfo">',
   '<% if (data.name) { %> <strong><%= data.name %></strong><br/><% } %>',
       '<% if (data.GDP) { %>',
       'GDP per capita: <strong><%= data.GDP %><strong><br/> <% } %>',
       '</div>'
       ].join('') )
},
fills: {
 A: '#fdd0a2',
 B: '#fdae6b',
 C: '#fd8d3c',
 D: '#f16913',
 E: '#d94801',
 F: '#a63603',
 G: '#7f2704',
 defaultFill: 'grey' 
},
data: {
  "QAT": {
    "name": "Qatar",
    "fillKey": "G",
    "GDP": "140649.2"
  },
  "": {
    "name": "Gambia",
    "fillKey": "A",
    "GDP": "1630.5"
  },
  "LUX": {
    "name": "Luxembourg",
    "fillKey": "G",
    "GDP": "98459.5"
  },
  "SGP": {
    "name": "Singapore",
    "fillKey": "F",
    "GDP": "82763.0"
  },
....

Answer 1

检查 this codepen对于一个工作示例，单击一个国家/地区，您将收到带有国家/地区名称和 ISO 代码的警报。它没有使用 jquery，但它应该可以帮助您确定在 DONE 回调中使用哪些变量。

你可能应该使用 http://datamaps.github.io/scripts/datamaps.world.min.js而不是 http://datamaps.github.io/scripts/datamaps-all.js .如果您使用 datamaps-all.js 是有原因的，请告诉我。

DONE 回调中使用的 Javascript:

done: function(datamap) {
  datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
    var message = geography.properties.name + ' has a country code of ' + geography.id;
    console.log(message);
    alert(message);
  });
}

引用我正在使用的脚本的 HTML:

<script src="http://datamaps.github.io/scripts/datamaps.world.min.js"></script>

同时检查您的 popupTemplate 属性，这是我的:

popupTemplate: function(geo, data) {
  return data && data.GDP ? 
    '<div class="hoverinfo"><strong>' + geo.properties.name + '</strong><br/>GDP per capita: <strong>' + data.GDP + '</strong></div>' : 
    '<div class="hoverinfo"><strong>' + geo.properties.name + '</strong></div>';
}