d3 Extrahieren von Werten aus der Auswahl nach dem Filtern von Daten bei MouseOver

Question

Ich entschuldige mich für den seltsamen Titel, es war nicht einfach, mein Problem zu beschreiben, hoffentlich enden andere, die eine Lösung für das gleiche Problem brauchen. Ich habe einige Markierungen auf einer Karte; ihre x, y-Position wird von langen, lat erzeugt, die von einigen Geräten ips bereitgestellt werden, so dass einige Marker sich überlappen, weil sie die exakten x, y-Werte haben. Ich versuche einen Tooltip zu erstellen, der beim Überfahren den Namen aller überlappenden Marker anzeigt. Hier bin ich so weit.

Beispieldatensatz:

dataset= [ 
{long: -75, lat: 43, name: 'name1'}, 
{long: -75, lat: 43, name: 'name2'} 
] 

tooltip=d3.select('body').append('div') 

markers=d3.selecltAll('.marker').data(dataset).enter().append() 
    .attr('class', 'marker') 
    .on('mousemove', (d)-> 
    myv=[] 
    vals=projection([d.long, d.lat]) 
    d3.selectAll('.marker').filter((d,i) -> 
     proj = projection([d.long, d.lat]) 
     proj[0] < (vals[0]+5) && proj[0] > (vals[0]-5) && proj[1] < (vals[1]+5) && proj[1] > (vals[1]-5) 
    ).text (d) -> 
     myv.push(d.name) 
) 

So, hier sind meine Fragen,

1) Mit der Textfunktion der d.name im myV-Datensatz zu drücken, funktioniert, aber fühlt sich nicht richtig. Ich habe in den letzten paar Stunden versucht, dies auf eine sauberere Art und Weise zu tun, aber ich konnte es nicht tun. Ich habe versucht, Datum (d) -> myv.push (D.name), die nur aus einem Grund ONCE nur beim ersten Hover funktioniert.

2) Jetzt habe ich den Datensatz myv Wie zeige ich es in der Tooltip?

3) Gibt es einen besseren/saubereren Weg, um das zu erreichen, was ich versuche?

Vielen Dank im Voraus für Ihre Zeit!

Answer 1

In Bezug auf (1) können Sie .each verwenden, um eine Funktion einmal für jedes Datum in einer Auswahl auszuführen:

d3.selectAll('.marker') 
     .filter(...) 
     .each(function(d) { myv.push(d.name); }); 

---

die Namen innerhalb des Tooltip angezeigt werden Sie separate Auswahl tun benötigen und Verwenden Sie dann das myv Array als Ihr Dataset.

tooltip.selectAll(".name") 
    .data(myv) 
    // do stuff