tick di assi del testo svg multilinea in d3

Question

Sto tentando di rendere un semplice istogramma con un'etichetta per ogni barra come zecche sull'asse x. Le etichette più lunghe si rincorrono l'una sull'altra. Dal momento che gli elementi di testo svg non supportano il wrapping delle parole, ho cercato soluzioni alternative.

Cambiare il testo di categoria che va nelle etichette per includere il corretto < elementi tspan > non funziona poiché il testo non è impostato come innerHtml ma piuttosto solo il testo non elaborato dell'elemento. Ho anche considerato la post-elaborazione delle etichette per rimuovere il testo e sostituirlo con i tsp, ma non ho ancora trovato un modo elegante per farlo.

Purtroppo non posso usare foreignObject poiché ho bisogno del supporto IE9, ma molti degli stessi problemi di sostituzione del markup si applicherebbero comunque a quella soluzione.

Qualcuno ha risolto bene questo problema in passato o ha qualche suggerimento?

Answer 1

Si può fare l'involucro manualmente come in this example da 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);