D3 DataMaps: OnClick Ereignisse auf Bubbles

Question

Ich verfolge die Datamaps-Dokumente und ich versuche, einen OnClick-Listener zu den Blasen, die ich auf der SVG Rendering bin. Nun wird die svg div hat die folgenden Unter tags:

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

Die docs sagen, dies sollte in der folgenden Art und Weise durchgeführt werden, für die auf der Karte aufgeführten Länder:

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

und das funktioniert OK, während Sie versuchen, auf bestimmte Regionen auf der Karte zu klicken.

Der Versuch, den gleichen Hörer Blasen Klasse tut nichts anhängen ..

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

Answer 1

Durch die Zeit done läuft, haben bubbles bisher noch nicht hinzugefügt, da bubbles ein Plugin ist.

new Datamap gibt ein Objekt mit einer d3 Auswahl an svg:

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

, die für die erste Charge von Blasen funktionieren soll.

Wenn Sie dynamisch Blasen Hinzufügen und wollen nicht die Zuhörer zurücksetzen, können Sie jQuery Ereignis Delegation verwenden, um die dynamischen Blasen zu behandeln:

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