Как мы можем создать событие onclick для карты данных d3?

Question

Я строю карту d3 данных: http://datamaps.github.io/

Когда я нажимаю на страну, я хочу границу, чтобы изменить цвет. Как назначить событие onclick пути d3 с помощью datamaps? Кажется, что пути svg не имеют идентификатора CSS, а также любого идентификационного крючка.

Answer 1

Вы можете использовать JQuery "сделано: функция" и указать на ("нажмите"), как показано ниже:

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