Mam zestaw danych, które wykreślam w rozproszeniu. Gdy najeżdżam kursorem myszy na jedno z kółek, chciałbym, aby wyskoczyło z danymi (takimi jak wartości x, y, może więcej). Oto, czego próbowałem użyć:
vis.selectAll("circle")
.data(datafiltered).enter().append("svg:circle")
.attr("cx", function(d) { return x(d.x);})
.attr("cy", function(d) {return y(d.y)})
.attr("fill", "red").attr("r", 15)
.on("mouseover", function() {
d3.select(this).enter().append("text")
.text(function(d) {return d.x;})
.attr("x", function(d) {return x(d.x);})
.attr("y", function (d) {return y(d.y);}); });
Podejrzewam, że potrzebuję więcej informacji o tym, jakie dane wprowadzić?
Odpowiedzi:
Zakładam, że chcesz mieć podpowiedź. Najłatwiej to zrobić, dodając
svg:title
element do każdego okręgu, ponieważ przeglądarka zajmie się wyświetlaniem podpowiedzi, a myszka nie jest potrzebna. Kod byłby podobnyJeśli chcesz mieć bardziej wyszukane podpowiedzi, możesz na przykład użyć podpitego. Zobacz tutaj przykład.
źródło
svg:g
, na który nakładasz aktualny okrąg, ale podawaj zerową szerokość i wysokość. Obecnie zajmuje obwiednię i umieszcza podpowiedź na krawędzi. Pomóc może również zabawa z opcjami podpitków.Naprawdę dobry sposób tworzenia podpowiedzi opisano tutaj: Prosty przykład podpowiedzi D3
Musisz dołączyć element div
Następnie możesz go po prostu przełączyć za pomocą
d3.event.pageX
/d3.event.pageY
to bieżąca współrzędna myszy.Jeśli chcesz zmienić tekst, możesz użyć
tooltip.text("my tooltip text");
Przykład roboczy
źródło
Jest do tego niesamowita biblioteka, którą niedawno odkryłem. Jest prosty w użyciu, a wynik jest całkiem schludny: końcówka d3.
Można zobaczyć przykład tutaj :
Zasadniczo wszystko, co musisz zrobić, to pobrać ( index.js ), dołączyć skrypt:
a następnie postępuj zgodnie z instrukcjami tutaj (ten sam link co przykład)
Ale dla twojego kodu byłoby to coś takiego:
zdefiniuj metodę:
stwórz swój svg (tak jak już robisz)
wywołaj metodę:
dodaj wskazówkę do swojego obiektu:
Nie zapomnij dodać CSS:
źródło
Możesz przekazać dane, które mają być użyte po najechaniu myszą w ten sposób - zdarzenie mouseover używa funkcji z poprzednio
enter
edytowanymi danymi jako argumentem (i indeksem jako drugim argumentem), więc nie musisz używaćenter()
drugiego razu.źródło
d3.select(this)
zmodyfikować kształt i nie wiedziałem, jak uzyskać instancję podczas wprowadzania / aktualizacji.Ten zwięzły przykład ilustruje typowy sposób tworzenia niestandardowych podpowiedzi w d3.
źródło
return tooltip.style("top", (d.x + 40) + "px") .style("left", (d.y + 80) + "px");
w'mousemove'
atrybucie.d.x
Pomoże przesunąć narzędzie końcówką względem obiektu, a nie cała strona