如何为d3数据地图创建一个onclick事件？

Question

我正在构建一个d3数据地图：http://datamaps.github.io/ 当我点击一个国家时，我希望边框的颜色改变。如何使用datamaps为d3路径分配onclick事件？SVG路径似乎缺少CSS ID以及任何标识钩子。

- dangerChihuahua007

---

如果您正在使用该GitHub项目，最好提交一个问题以添加“单击高亮”选项。已经有了悬停高亮，因此您可以分叉该项目并在此处添加mousedown事件 https://github.com/markmarkoh/datamaps/blob/master/public/js/app/views/Map.js#L88 - minikomi

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 了解更多详细信息。

- Prabhash Jha

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

- Rob Imig