Drehen Sie den Text der x-Achse in d3

81

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

jschlereth
quelle

Antworten:

165

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>
mbostock
quelle
Okay, das ist perfekt. Danke, Mike. Das macht (fast) alles was ich tun muss. Die Frage ist nun, wie ich die y-Position basierend auf der Länge der Variablen automatisch ändere. WENN ich die Grundlinie wie folgt einstelle: <text font-size = "12px" transform = "translate (20.170) drehen (-90)"> Titel 1 </ text>. das ist gut. Angenommen, der nächste Titel ist länger. Ich möchte nicht, dass er das Diagramm überlappt, und ich möchte auch den Abstand zwischen der xAxis und dem Diagramm selbst minimieren.
Jschlereth
1
Wenn ich Ihre Frage beantwortet habe, fügen Sie bitte ein Kontrollkästchen hinzu, um die Frage als beantwortet zu markieren. Wenn Sie eine zusätzliche Frage haben, erstellen Sie bitte eine neue Frage! Ich denke, Sie fragen möglicherweise nach dem Textanker-Attribut zum Festlegen der Textausrichtung oder möglicherweise nach dem dy-Attribut zum Festlegen der Textgrundlinie.
mbostock
3
Verstanden ... text-anchor = 'end' <text text-anchor = "end" transform = "translate (20.130) drehen (-90)"> title1 </ text> Nochmals vielen Dank für die Hilfe, Mike. Du rockst!
Jschlereth
44

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)");
20man
quelle
2

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.

Geben Sie hier die Bildbeschreibung ein

Weitere Verwendungsmöglichkeiten für dieses Muster finden Sie auf der Achsendokumentationsseite .

ColinE
quelle