Drehen Sie den Text der x-Achse in d3

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).

Wenn Sie eine Transformation von drehen (180) festlegen, wird das Element relativ zum Ursprung und nicht relativ zum Textanker gedreht. Wenn für Ihre Textelemente auch ein x- und ein y- Attribut festgelegt sind, um sie zu positionieren, ist es sehr wahrscheinlich, dass Sie den Text außerhalb des Bildschirms gedreht haben. Wenn Sie es beispielsweise versucht haben,

<text x="200" y="100" transform="rotate(180)">Hello!</text>

Der Textanker wäre bei 200-200.100⟩. Wenn der Textanker bei <200.100⟩ bleiben soll, können Sie den Text mithilfe der Transformation positionieren, bevor Sie ihn drehen, wodurch der Ursprung geändert wird.

<text transform="translate(200,100)rotate(180)">Hello!</text>

Eine andere Option besteht darin, die optionalen Argumente cx und cy für die Rotationstransformation von SVG zu verwenden , damit Sie den Rotationsursprung angeben können. Dies ist zwar etwas überflüssig, aber der Vollständigkeit halber sieht es so aus:

<text x="200" y="100" transform="rotate(180,200,100)">Hello World!</text>

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)");

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 .