javascript - 我们如何为 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);
  });
}