D3 DataMaps:气泡上的OnClick事件

Question

我正在跟踪datamaps文档，并试图将onClick侦听器设置为我在svg上呈现的气泡。现在，svg有以下子标记：

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

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

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