javascript - D3 数据映射 : OnClick Events on Bubbles

Question

我正在关注数据 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"); 
            });
        }

Answer 1

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