使用D3 DataMaps选择SVG项？

Question

我正在查看数据地图库的D3，我想知道如何操作svg内容。假设我看了基本的世界地图，我如何通过点击加拿大运行一个alert("Selected")？或者点击它来改变它的背景色？

编辑:在我的具体例子中，我使用的是美国地图。我使用下面的行来引导地图：

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

现在，在usa.js中我找到了诸如"NY“这样的ID。然而，这不允许我

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

Answer 1

事件方面的文档说明如下：

所有事件都会冒泡到根svg元素，若要侦听事件，请使用已完成的回调。

因此，为了绑定单击事件并通知名称，请使用map对象的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>

我的例子点击格陵兰

​

​

可以利用这些财产作出进一步限制(例如，只有特定国家)。