Wie füge ich Achsen in d3 Textbeschriftungen hinzu?
Zum Beispiel habe ich ein einfaches Liniendiagramm mit einer x- und einer y-Achse.
Auf meiner x-Achse habe ich Häkchen von 1 bis 10. Ich möchte, dass das Wort "Tage" darunter angezeigt wird, damit die Leute wissen, dass die x-Achse Tage zählt.
In ähnlicher Weise habe ich auf der y-Achse die Zahlen 1-10 als Zecken und möchte, dass die Wörter "Sandwiches gegessen" seitlich erscheinen.
Gibt es eine einfache Möglichkeit, dies zu tun?
quelle
.attr("transform", "rotate(-90)")
dass sich das gesamte Koordinatensystem dreht. Wenn Sie also mit "x" und "y" positionieren, müssen Sie die Positionen von meinen Erwartungen austauschen.In der neuen D3js-Version (ab Version 3) haben Sie beim Erstellen einer Diagrammachse über die
d3.svg.axis()
Funktion Zugriff auf zwei Methoden, die aufgerufen werdentickValues
undtickFormat
in die Funktion integriert sind, sodass Sie angeben können, für welche Werte Sie die Ticks benötigen und in welchen Format, in dem der Text angezeigt werden soll:quelle
Wenn Sie die Beschriftung der y-Achse in der Mitte der y-Achse haben möchten, wie ich es getan habe:
-50
)chartHeight / 2
)Codebeispiel:
Dies verhindert, dass das gesamte Koordinatensystem gedreht wird, wie oben von lubar erwähnt.
quelle
Wenn Sie wie vorgeschlagen in d3.v4 arbeiten, können Sie diese Instanz verwenden und alles bieten, was Sie benötigen.
Möglicherweise möchten Sie nur die Daten der X-Achse durch Ihre "Tage" ersetzen, aber denken Sie daran, die Zeichenfolgenwerte korrekt zu analysieren und keine Verkettung anzuwenden.
parseTime kann genauso gut den Trick für die Skalierung von Tagen mit einem Datumsformat ausführen?
Geige mit globalen CSS / JS
quelle
D3 bietet einen ziemlich einfachen Satz von Komponenten, mit denen Sie Diagramme zusammenstellen können. Sie erhalten die Bausteine, eine Achsenkomponente, Datenverbindung, Auswahl und SVG. Es ist Ihre Aufgabe, sie zu einem Diagramm zusammenzufügen!
Wenn Sie ein herkömmliches Diagramm wünschen, dh ein Achsenpaar, Achsenbeschriftungen, einen Diagrammtitel und einen Diagrammbereich, schauen Sie sich doch d3fc an . Es handelt sich um einen Open-Source-Satz von D3-Komponenten auf höherer Ebene. Es enthält eine kartesische Diagrammkomponente, die möglicherweise Ihren Anforderungen entspricht:
Ein vollständigeres Beispiel finden Sie hier: https://d3fc.io/examples/simple/index.html
quelle
oder
quelle