Symbole osi multilinii svg tekstu w d3

Question

Próbuję wyrenderować prosty wykres słupkowy z etykietą dla każdego paska jako tyknięcia osi na osi X. Dłuższe etykiety przebiegają jedna nad drugą. Ponieważ elementy tekstowe svg nie obsługują zawijania tekstu, szukałem alternatywnych rozwiązań.

Zmiana tekstu kategorii umieszczanego na etykietach w celu uwzględnienia odpowiednich elementów nie działa, ponieważ tekst nie jest ustawiony jako innerHtml, a jedynie tekst nieprzetworzony elementu. Rozważyłem także post-processing etykiet, aby usunąć tekst i zastąpić go tspanami, ale nie znalazłem jeszcze eleganckiego sposobu na to.

Niestety nie mogę używać obiektu foreignObject, ponieważ potrzebuję wsparcia dla IE9, ale i tak wiele z tych samych problemów z zastępowaniem znaczników dotyczyłoby tego rozwiązania.

Czy ktoś rozwiązał ten problem w przeszłości lub miał jakieś sugestie?

Answer 1

Można to zrobić ręcznie, jak owijanie w this example Mike Bostock:

function wrap(text, width) { 
    text.each(function() { 
    var text = d3.select(this), 
     words = text.text().split(/\s+/).reverse(), 
     word, 
     line = [], 
     lineNumber = 0, 
     lineHeight = 1.1, // ems 
     y = text.attr("y"), 
     dy = parseFloat(text.attr("dy")), 
     tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em"); 
    while (word = words.pop()) { 
     line.push(word); 
     tspan.text(line.join(" ")); 
     if (tspan.node().getComputedTextLength() > width) { 
     line.pop(); 
     tspan.text(line.join(" ")); 
     line = [word]; 
     tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word); 
     } 
    } 
    }); 
} 

vis.selectAll(".tick text") 
    .call(wrap, 100);