使用D3 DataMaps选择SVG项目？

Question

我正在查看D3的Data Maps库，我想知道如何操作svg内容。假设我看一下基本的世界地图，我将如何通过点击加拿大运行alert("Selected")？或点击它更改其背景颜色？

编辑：在我的具体实例中，我使用美国地图。我用下面的线来开启地图：

var map = new Datamap({element: document.getElementById('maincontains'), 
scope: 'usa', 
fills: {defaultFill: 'rgb(217, 217, 217)'} 
}); 

现在，在usa.js我找到的ID，如“NY”。然而，这并不让我

document.getElementById("NY").addEventListener('click', function(){ alert("New York");}

Answer 1

的documentation上活动说以下内容：

所有事件都冒泡到根svg元素，并听取 事件，使用完成的回调。

所以为了绑定click事件，并提醒名称，使用done事件map对象，并使用事件处理程序内的svg对象：

<script> 
    var map = new Datamap({ 
     element: document.getElementById('container'), 
     done: function(datamap) { 
      datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) { 
       alert(geography.properties.name); 
      }); 
     } 
    }); 
</script> 

我的例子点击格陵兰：

此外restri （例如只有特定的国家）可以使用这些属性来制作。