2016-03-29 6 views
2

Ich habe eine normale nvd3 Liniendiagramm. Manchmal sind die Daten, die durch das Diagramm dargestellt werden, lückenhaft. Ich möchte in der Lage sein Teil der Linien anders dies darzustellen, um Stil, wie in diesem Beispiel:Anwenden von stroke-dasharray style nur auf einen Teil eines Pfades

enter image description here

Hier werden die Punkte, die durch eine gestrichelte Linie verbunden, wenn weit voneinander entfernt und eine vollständige Linie wenn nahe beieinander. Ist es möglich, stroke-dasharray nur auf bestimmte Teile eines Pfades anzuwenden, oder muss ich nvd3 dazu bringen, eine neue Zeile für jedes Segment zu erstellen, in dem sich das Styling ändert?

Antwort

1

Sie können stroke dasharray nicht auf einen Teil eines Pfads anwenden, aber Sie können ein sehr langes Stroke Dash Array erstellen, das der Länge Ihres Pfads entspricht, und die Positionen der Striche in JavaScript sorgfältig berechnen, sodass die Striche aufeinander ausgerichtet sind mit dem Teil deines Weges, den du gerne streichen würdest.

+0

Das * fast * funktioniert und beantwortet effektiv die Frage, obwohl ich es nicht richtig verstanden habe, bis ich herausgefunden habe, wie man die Pfadlänge berechnet, die einer gegebenen x-Achsenposition entspricht. –

+0

Die Segmentpfadlänge ist die Quadratwurzel aus der Summe der Quadrate der Differenz zwischen den zwei Punktkoordinaten: http://math.info/Algebra/Distance_Cartesian_Plane/ –

+0

Ich endete mit einem anderen Pfadelement, das vom DOM getrennt wurde, um die Länge zu erreichen Berechnungen (so funktioniert es auch für Interpolationen, die keine geraden Segmente haben). Danke für Ihre Hilfe! –