D3 DataMaps：OnClick上的气泡事件

问题描述：

我跟踪的datamaps文件，我想设置一个onClick监听器，我在svg上呈现的泡沫。现在， svg div 有以下子标签：

I am following the datamaps docs and I am trying to set an onClick listener to the bubbles I am rendering on the svg. Now, the svg div has the following sub tags:

<svg>
  <g id class="datamaps-subunits">..</g>
  <g id class="bubbles">..</g>
</svg>

文档表示，对于地图上列出的国家/地区， / p>

The docs say this should be done in the following way, for the countries listed on the map:

done: function(datamap) {
            datamap.svg.selectAll('.datamaps-subunits').on('click', function() {
              alert("hello");  
            });
        }

这可以很好地尝试点击地图上的特定区域。

And this works fine, while trying to click on particular regions on the map.

尝试将相同的监听器附加到 bubble 类别中。

Trying to attach the same listener to bubbles class does nothing..

done: function(datamap) {
            datamap.svg.selectAll('.bubbles').on('click', function() {
                alert("hello"); 
            });
        }

答

$ c> done 运行， bubbles 尚未添加，因为 bubbles 是插件。

By the time done runs, bubbles haven't been added yet since bubbles is a plugin.

new Datamap 返回一个对象，其d3选择 svg ：

new Datamap returns an object with a d3 selection at svg:

var map = new Datamap({...}); 
//add bubbles
map.bubbles(bubbleData);
//handle bubble clicks
map.svg.selectAll('.bubbles').on('click', function() {...});

这应该适用于第一批气泡。

That should work for the first batch of bubbles.

如果您正在动态添加气泡，并且不想重置监听器，则可以使用jQuery事件委托来处理动态气泡：

If you are dynamically adding bubbles and don't want to reset the listeners, you can use jQuery event delegation to handle the dynamic bubbles:

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

D3 DataMaps：OnClick上的气泡事件

相关推荐