D3 数据映射:气泡上的单击事件

D3 DataMaps: OnClick Events on Bubbles

本文关键字：单击 事件 气泡 数据 映射 D3      更新时间：2023-09-26

我正在关注数据映射文档，我正在尝试为我在 svg 上渲染的气泡设置 onClick 侦听器。现在，svgdiv 具有以下子标签：

<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");  
            });
        }

这工作正常，同时尝试单击地图上的特定区域。

尝试将相同的侦听器附加到气泡类没有任何作用。

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 事件委托来处理动态气泡：

$(map.svg[0][0]).on('click', '.bubbles', function(e) {
  //handle click here as well
});
相关文章：