Ich folge den Datamaps-Dokumenten und versuche, einen onClick-Listener auf die Blasen einzustellen, die ich auf dem SVG rendere. Jetzt hat das svg div die folgenden Sub-Tags:
<svg>
<g id class="datamaps-subunits">..</g>
<g id class="bubbles">..</g>
</svg>
Die Dokumente sagen, dass dies für die auf der Karte aufgeführten Länder folgendermaßen erfolgen sollte:
done: function(datamap) {
datamap.svg.selectAll('.datamaps-subunits').on('click', function() {
alert("hello");
});
}
Dies funktioniert einwandfrei, wenn Sie versuchen, auf bestimmte Regionen auf der Karte zu klicken.
Der Versuch, den gleichen Listener an die Bubbles- Klasse anzuhängen, führt zu nichts.
done: function(datamap) {
datamap.svg.selectAll('.bubbles').on('click', function() {
alert("hello");
});
}
Zum Zeitpunkt der doneAusführung wurde bubblesnoch kein bubblesPlugin hinzugefügt .
new DatamapGibt ein Objekt mit einer d3-Auswahl zurück bei svg:
var map = new Datamap({...});
//add bubbles
map.bubbles(bubbleData);
//handle bubble clicks
map.svg.selectAll('.bubbles').on('click', function() {...});
Das sollte für die erste Charge von Blasen funktionieren.
Wenn Sie dynamisch Blasen hinzufügen und die Listener nicht zurücksetzen möchten, können Sie die jQuery-Ereignisdelegierung verwenden, um die dynamischen Blasen zu verarbeiten:
$(map.svg[0][0]).on('click', '.bubbles', function(e) {
//handle click here as well
});
Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen