Ich bin ein wenig neu in D3.js und habe es geschafft, mit dem, was ich im Internet gefunden habe, ein Messgerät zu erstellen. Aber ich konnte keine Anzeige finden, die den aktuellen Wert an der Spitze der Nadel zeigt. Etwas wie das: was ich will
Offensichtlich möchte ich, dass der Wert der Nadel folgt. Ich habe versucht, der Nadel selbst das Attribut "Text" hinzuzufügen, aber es hat nicht funktioniert.
Hier ist ein Code-Link: Ссылка
Hier ist mein Js-Code:
%Vor%Und hier ist mein HTML-Code:
%Vor%Wenn jemand helfen könnte, habe ich einige Tage erfolglos versucht. Danke.
Hier ist ein aktualisierter Codepen
1) Erstellen Sie als Teil der Initialisierung das Element valueText
2) Erstellen Sie auch bei der Initialisierung formatValue , um Prozent
3) Berechne für jeden Frame des Übergangs die Position des Textes. Es wird ein Offset von 45 units zu self.len (die Länge der Nadel) hinzugefügt, um den Text nach außen zu bewegen.
4) Übersetze valueText basierend auf der berechneten Position und aktualisiere den Text von der aktuellen progress
Nun, ich habe etwas herausgefunden, das auf eine bessere Lösung wartet.
Ich benutze das:
%Vor%[...] dann rufend:
%Vor%Damit es nicht sofort erscheint, sondern wenn die Nadel an ihrer Position stehen geblieben ist.
Es funktioniert, in der Art, wie der Wert oben auf der Nadel erscheint, aber ich habe immer noch zwei Probleme. Ich würde es wirklich mögen, dass es der Nadel während der Nadelanimation den ganzen Weg lang folgt, wenn es zu ihrem Wert kommt, und ich hätte etwas allgemeineres als die Verwendung der Koordinaten, die ich beim Berechnen gefunden habe. Gibt es eine Funktion, die geben kann? Ich zum Beispiel die Mitte des Messinstruments?
Ich habe den oben angegebenen Stift auf diese Version des Messgeräts eingestellt. ( Ссылка )
Wie auch immer, diese Lösung entspricht nicht wirklich meinen Erwartungen, aber ich werde sie benutzen, bis ich etwas Besseres finde.
Tags und Links javascript d3.js gauge
