Wie Sie die Etiketten auf einer zoombaren Karte verschieben?

Ich arbeite an einer Karte, die von D3.js erstellt wird. Ich habe herausgefunden, wie man die Karte vergrößert und Labels hinzufügt, indem man Mike Bostock's tutorial folgt. Nachdem ich jedoch die Karte vergrößert habe, weiß ich nicht, wie die Koordinaten der Beschriftungen neu berechnet werden.Wie Sie die Etiketten auf einer zoombaren Karte verschieben?

Ich verstehe nicht wirklich, wie projection(data.geometry.coordinates) funktioniert. Es scheint projection() wird ein Paar neue Koordinaten basierend auf der aktuellen Svg neu erstellen und irgendwie automatisch die Etiketten für Sie. Daher habe ich versucht, projection() erneut in der clicked() Funktion auszuführen, aber es funktioniert nicht. Hier

ist die code, dass ich arbeite, und ich bin mit d3 Version 4 statt 3.

Quelle

2017-11-14 SSD

Wenn Sie Ihre Städte zum g Auswahl hinzufügen (anstelle der svg Auswahl), dann Es sollte gut funktionieren, da der Zoom für diese Auswahl gilt.

var selection = g 
     .selectAll("g.classTown") 
     .data(towns);

aktualisiert Code: http://plnkr.co/edit/xJvh6LVweZqQUs7GFFH7?p=preview

Quelle

2017-11-14 01:59:29

Bedeutet dies, 'Vorsprung (') werden die Etiketten automatisch statt, nachdem in gezoomt basierend auf der Skala des aktuellen Elements in diesem Fall 'G'? – SSD

Nein, die Projektion() gibt die [x, y] -Koordinaten im SVG-Raum zurück. Zoom transformiert diesen Raum und passt die Ansicht von allem an, was er enthält. –

Wie Sie die Etiketten auf einer zoombaren Karte verschieben?

Antwort

Verwandte Themen