D3 DataMaps：OnClick上的气泡事件 [英] D3 DataMaps: OnClick Events on Bubbles

问题描述

我跟踪的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上的气泡事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！