Ich benutze D3, um ein Balkendiagramm zu generieren (ich habe den Code von D3 angepasst)dieses Beispiel). Die Etiketten, die ich auf dem verwendex-Achse sind jeweils ein paar Wörter lang, und da dies dazu führt, dass sich alle Bezeichnungen überlappen, muss ich diese Bezeichnungen über mehrere Zeilen aufteilen. (Es ist in Ordnung, wenn ich alle Leerzeichen in jedem Etikett durch Zeilenumbrüche ersetzen kann.)

Ich habe es ursprünglich versucht, indem ich die Leerzeichen durch wörtliche Zeilenumbrüche ersetzte (
) und Einstellungxml:space="preserve" auf den etiketten<text> Elemente. Leider stellt sich heraus, dass SVG diese Eigenschaft nicht respektiert. Als nächstes habe ich versucht, jedes Wort in ein einzuschließen<tspan> das könnte ich später stylen. Ich habe jedes Etikett durch diese Funktion geschickt:

function (text) {
    return '<tspan>' + text.replace(/ /g, '</tspan><tspan>') + '</tspan>';
}

aber das bringt nur wörtlich<tspan>s in den Ausgang. Wie kann ich meine Textetiketten einwickeln?tspans (oder etwas anderes tun), damit sich meine Beschriftungen nicht überlappen?