Ich habe an einem interaktiven Liniendiagramm gearbeitet, das mit D3.js erstellt wurde. Ein Hover Ich möchte, dass ein Tooltip mit einer vertikalen Linie angezeigt wird. Die vertikale Linie kommt gut an, aber ich habe Probleme mit der Werkzeugspitze. Die Position der Werkzeugspitze befindet sich nicht in der Grafik und ich erhalte nur das erste Datenelement.
Hier ist mein Code:
%Vor%Die Daten:
%Vor%Ich bin nicht in der Lage herauszufinden, was das Problem ist.
Wie kann ich das lösen?
Vielen Dank im Voraus.
EDIT: Hier ist der Arbeitscode: Ссылка
In Ihrer HoverMouseOn-Methode ist die Variable d nicht definiert. Sie müssen d3.bisector verwenden, um den nächsten Datenpunkt zu finden, wie folgt:
%Vor%Außerdem habe ich den Maus-Listener auf 'vis' anstatt auf 'rectHover' gesetzt:
%Vor%und verwendet d.number anstelle von d.class für die y-Werte. Wenn Sie möchten, dass der Tooltip immer in der Zeile steht, wird ein bisschen komplizierter . Hier ist eine Arbeitsgeige.
Vielleicht ist es einfacher, den Tooltip einfach an Ihre Mauskoordinaten zu setzen wie in dieser Geige
Tags und Links javascript d3.js