Ich bin neu in dieser Art von Forum und meine Englischkenntnisse sind nicht die besten, aber ich werde versuchen, mein Bestes zu geben:).
Es gibt ein Beispiel für ein Liniendiagramm mit View Finder auf der nvd3-Website . Dies ist die eine (examples \ lineWithFocusChart.html, nvd3 zip-Paket) mit der ich in den letzten 2 Tagen gearbeitet habe. Ich habe nur eine Änderung an dem Format des Beispiels vorgenommen: Ich verwende Daten in der X-Achse anstelle von normalen Zahlen.
Hier sind meine 2 Fragen:
1- Wie kann ich alle Etiketten der Ticks auf der X-Achse drehen? Meine Daten sind zu lang (% x% X, Tag und Uhrzeit) und ich möchte, dass sie gedreht werden, um ihre Anzeige zu verbessern. Ich kann nur 2 Ticks rotieren lassen (die Max und Min, die Kanten der X-Achse). Dies ist der Code, den ich im Block "switch (axis.orient ())" unter nv.d3.js ändere:
%Vor%Wie Sie sehen können, habe ich .attr ('transform', 'rotiere (45)') als neues Attribut gesetzt, damit die Max- und Min-Ticks rotiert werden (axisMaxMin). Ich habe diesen Weg (in der gesamten Datei nv.d3.js) mit den anderen Textelementen versucht, von denen ich glaube, dass sie den x-Ticks zugeordnet sind, aber es funktioniert nicht. Irgendeine Idee? Wo muss ich die Transformation setzen, um alle X-Labels gedreht anzuzeigen?
2- Wenn Sie im Beispiel die Maus über die Linie bewegen, wird kein Ereignis ausgelöst, um den Wert (x, y) anzuzeigen, der dem Punkt zugeordnet ist. Wie kann ich diese Werte zeigen? Ich habe versucht, die Methoden, die in anderen Beispielen verwendet wurden, zu kopieren, wenn diese Werte angezeigt werden, aber es funktioniert nicht. Irgendeine Idee?
Danke, dass Sie Ihre Zeit und Ihr Wissen geteilt haben: D.
Es gab ein aktuelles Update für nvd3, das das Drehen der X-Achsen-Tick-Labels wirklich einfach macht. Es gibt jetzt eine Funktion des Achsenmodells mit dem Namen rotateLabels (Grad), die eine Ganzzahl annimmt und Ihre xTick-Beschriftungen um die angegebene Gradzahl rotiert. Um alle xTick Etiketten um 45 Grad zurück zu drehen, könnten Sie es wie folgt verwenden:
%Vor%Tags und Links javascript svg d3.js nvd3.js