D3 DataMaps:泡泡上的OnClick事件

时间:2014-11-30 16:26:07

标签: javascript svg d3.js datamaps

我正在关注数据地图文档,我正在尝试将onClick侦听器设置为我在svg上渲染的气泡。现在, svg div 具有以下子标记:

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

这可以正常工作,同时尝试点击地图上的特定区域。

尝试将同一个侦听器附加到 bubbles 类时什么都不做..

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

1 个答案:

答案 0 :(得分:9)

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