我正在关注 datamaps 文档,并尝试为我在 svg 上渲染的气泡设置一个 onClick 侦听器。现在svg div具有以下子标签:
<svg>
<g id class="datamaps-subunits">..</g>
<g id class="bubbles">..</g>
</svg>
文档称,对于地图上列出的国家/地区,应通过以下方式完成此操作:
done: function(datamap) {
datamap.svg.selectAll('.datamaps-subunits').on('click', function() {
alert("hello");
});
}
当尝试单击地图上的特定区域时,这工作得很好。
尝试将同一个侦听器附加到bubbles类什么都不做..
done: function(datamap) {
datamap.svg.selectAll('.bubbles').on('click', function() {
alert("hello");
});
}
到......的时候done
runs, bubbles
此后尚未添加bubbles
是一个插件。
new Datamap
返回一个具有 d3 选择的对象svg
:
var map = new Datamap({...});
//add bubbles
map.bubbles(bubbleData);
//handle bubble clicks
map.svg.selectAll('.bubbles').on('click', function() {...});
这应该适用于第一批气泡。
如果您动态添加气泡并且不想重置侦听器,则可以使用 jQuery 事件委托来处理动态气泡:
$(map.svg[0][0]).on('click', '.bubbles', function(e) {
//handle click here as well
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)