Ich bin neu in der d3- und svg-Codierung und suche nach einer Möglichkeit, Text auf der xAxis eines Diagramms zu drehen. Mein Problem ist, dass die xAxis-Titel normalerweise länger sind als die Balken im Balkendiagramm. Daher möchte ich den Text so drehen, dass er vertikal (und nicht horizontal) unter der xAxis verläuft.
Ich habe versucht, das Transformationsattribut hinzuzufügen: .attr ("transformieren", "drehen (180)")
Aber wenn ich das mache, verschwindet der Text ganz. Ich habe versucht, die Höhe der SVG-Zeichenfläche zu erhöhen, konnte den Text jedoch immer noch nicht anzeigen.
Alle Gedanken darüber, was ich falsch mache, wären großartig. Muss ich auch die x- und y-Positionen anpassen? Und wenn ja, um wie viel (schwer zu beheben, wenn ich es in Firebug sehen kann).
Schamlos von anderswo gepflückt , alle Ehre dem Autor.
Der Rand, der nur enthalten ist, um den unteren Rand anzuzeigen, sollte erhöht werden.
var margin = {top: 30, right: 40, bottom: 50, left: 50}, svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-65)");
quelle
Ein Problem bei diesen rotierenden D3-Achsenbeschriftungen besteht darin, dass Sie diese Logik jedes Mal neu anwenden müssen, wenn Sie die Achse rendern. Dies liegt daran, dass Sie keinen Zugriff auf die Auswahlmöglichkeiten für Eingabe, Aktualisierung und Beendigung haben, mit denen die Achse die Häkchen und Beschriftungen rendert.
d3fc ist eine Komponentenbibliothek mit einem Dekorationsmuster, mit dem Sie auf die von Komponenten verwendeten untergeordneten Datenverknüpfungen zugreifen können.
Die D3-Achse wird durch einen Drop-In-Ersatz ersetzt, bei dem die Drehung der Achsenbeschriftung wie folgt ausgeführt wird:
var axis = fc.axisBottom() .scale(scaleBand) .decorate(function(s) { s.enter() .select('text') .style('text-anchor', 'start') .attr('transform', 'rotate(45 -10 10)'); });
Beachten Sie, dass die Drehung nur auf die Eingabeauswahl angewendet wird.
Weitere Verwendungsmöglichkeiten für dieses Muster finden Sie auf der Achsendokumentationsseite .
quelle