Javascript 使用D3数据映射选择SVG项？

我正在看D3库，我想知道如何操作svg内容。假设我看一下基本世界地图，我如何通过单击加拿大来运行

警报（“选定”）

？或者通过点击它来改变它的背景色

编辑：在我的特定实例中，我使用的是美国地图。我使用以下行启动地图：

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

现在，在中，我找到诸如“NY”之类的ID。然而，这不允许我这样做

document.getElementById（“NY”）.addEventListener（'click'，function（）{
警报（“纽约”）；}

关于事件的说明如下：

所有事件都会冒泡到根svg元素并侦听 事件，使用“完成”回调

因此，为了绑定单击事件并提醒名称，请使用

map

对象的

done

事件，并在事件处理程序中使用

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>

var-map=新数据映射({
元素：document.getElementById（'container'），
完成：函数（数据映射）{
datamap.svg.selectAll（'.datamaps子单元'）。打开（'click'，函数（地理）{
警报（geography.properties.name）；
});
}
});

我的例子是点击格陵兰岛：

可使用该物业进行进一步限制（例如，仅限特定国家）