我正在关注数据 map 文档,我正在尝试为我在 svg 上呈现的气泡设置一个 onClick 监听器。现在,svg div 具有以下子标签:
<svg>
<g id class="datamaps-subunits">..</g>
<g id class="bubbles">..</g>
</svg>
文档说对于 map 上列出的国家/地区,应该按以下方式完成:
done: function(datamap) {
datamap.svg.selectAll('.datamaps-subunits').on('click', function() {
alert("hello");
});
}
这在尝试点击 map 上的特定区域时效果很好。
尝试将相同的监听器附加到 bubbles 类没有任何效果..
done: function(datamap) {
datamap.svg.selectAll('.bubbles').on('click', function() {
alert("hello");
});
}
最佳答案
done
运行时,bubbles
尚未添加,因为 bubbles
是一个插件。
new Datamap
返回一个在 svg
处有 d3 选择的对象:
var map = new Datamap({...});
//add bubbles
map.bubbles(bubbleData);
//handle bubble clicks
map.svg.selectAll('.bubbles').on('click', function() {...});
这应该适用于第一批气泡。
如果您动态添加气泡并且不想重置监听器,您可以使用 jQuery 事件委托(delegate)来处理动态气泡:
$(map.svg[0][0]).on('click', '.bubbles', function(e) {
//handle click here as well
});
关于javascript - D3 数据映射 : OnClick Events on Bubbles,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27215394/