I am building a d3 data map: /

When I click on a country, I want the border to change color. How do I assign an onclick event to a d3 path using datamaps? The svg paths seem to lack a CSS ID as well as any identifying hook.

I am building a d3 data map: http://datamaps.github.io/

When I click on a country, I want the border to change color. How do I assign an onclick event to a d3 path using datamaps? The svg paths seem to lack a CSS ID as well as any identifying hook.

• javascript
• d3.js

• If you're using that github project, it might be better to submit an issue to add a "highlight on click" option. There's already highlight on hover so you could fork the project and add a mousedown event here github./markmarkoh/datamaps/blob/master/public/js/app/views/… – minikomi Commented Apr 7, 2013 at 10:59

2 Answers 2

You can use JQuery "done:function" and specify on("click") as below :

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

Refer to https://github./markmarkoh/datamaps for further detail.

You'll need both the done call back as well as the updateChoropleth function. For example, to turn each country black you would do:

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