Wie teilt man den Tick mit einem Datum in zwei Reihen auf?

Question

Ich habe ein Balkendiagramm mit der X-Achse, die Ticks haben, die den Monat und das Jahr enthalten. Monat und Jahr stehen jetzt in der Reihe.

Ich muss den Monat in der ersten Zeile verlassen und das Jahr in der zweiten Zeile verschieben.

svg.append("g") 
    .attr("class", "axis") 
    .attr("transform", "translate(0," + (h - padding) + ")") 
    .call(xAxis); 

Hier mein jsfiddle ist: https://jsfiddle.net/anton9ov/uaygrmLo/

Answer 1

Es gibt diese schöne "Wrap-Text-Funktion", von Bostock geschrieben:

svg.append("g") 
    .attr("class", "axis") 
    .attr("transform", "translate(0," + (h - padding) + ")") 
    .call(xAxis) 
    .selectAll(".tick text") 
    .call(wrap, 40); 

: https://bl.ocks.org/mbostock/7555321

Mit dieser Funktion habe ich Ihre Achse gerade geändert

Überprüfen Sie die Geige: https://jsfiddle.net/gerardofurtado/aLc8t6yq/

PS: Ich habe 40 hier als magische Zahl benutzt, ändere es nach deinen Bedürfnissen.