Multiline Svg Textachse tickt in d3

8

Ich versuche, ein einfaches Balkendiagramm mit einem Label für jeden Balken als Achsen-Ticks auf der x-Achse zu rendern. Längere Etiketten laufen übereinander. Da Svg-Text-Elemente kein Word-Wrapping unterstützen, habe ich nach alternativen Lösungen gesucht.

Ändern des Kategorietextes, der in die Labels eingefügt wird, um den richtigen & lt; tspan & gt; elements funktioniert nicht, da der Text nicht als innerHtml, sondern nur als Rohtext des Elements definiert ist. Ich habe auch darüber nachgedacht, die Beschriftungen zu bearbeiten, um den Text zu entfernen und durch Tspans zu ersetzen, aber ich habe noch keinen eleganten Weg gefunden, dies zu tun.

Leider kann ich foreignObject nicht verwenden, da ich IE9-Unterstützung benötige, aber viele der gleichen Markup-Ersetzungsprobleme würden sowieso für diese Lösung gelten.

Hat jemand dieses Problem in der Vergangenheit gut gelöst oder irgendwelche Vorschläge?

    
Kyle Goodwin 07.12.2012, 14:25
quelle

1 Antwort

5

Sie können das Wrapping manuell durchführen, wie in diesem Beispiel von Mike Bostock:

%Vor%     
Ilya Boyandin 27.03.2014, 16:46
quelle

Tags und Links