我们如何为d3数据映射创建onclick事件？

Question

我正在构建一个d3数据映射： http://datamaps.github.io/

当我点击某个国家/地区时，我希望边框能够改变颜色。如何使用数据映射将onclick事件分配给d3路径？ svg路径似乎缺少CSS ID以及任何识别钩子。

Answer 1

您可以使用JQuery“done：function”并指定on（“click”），如下所示：

 done: function(datamap) {
        datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
            alert(geography.properties.name);
        });
    }

有关详细信息，请参阅https://github.com/markmarkoh/datamaps。

Answer 2

您需要done回拨以及updateChoropleth功能。例如，要将每个国家/地区变为黑色，您可以这样做：

done: function(datamap) {
  datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
      var m = {};
      m[geography.id] = '#000000';
      datamap.updateChoropleth(m);
  });
}