d3の複数行のsvgテキスト軸のティック

Question

各バーのラベルをx軸の軸目盛として使用して、単純な棒グラフをレンダリングしようとしています。より長いラベルは互いに重なり合っている。 svgのテキストエレメントはワードラッピングをサポートしていないので、私は代替の解決法を検討してきました。

適切な<要素を含むようにラベルに入るカテゴリテキストを変更すると、テキストはinnerHtmlとしてではなく要素の生のテキストとして設定されるため、機能しません。テキストを削除し、それをtspansに置き換えるラベルを後処理することも考えましたが、まだそれを行うためのエレガントな方法は見つかりませんでした。

残念ながら私はIE9のサポートが必要なので、私はforeignObjectを使用できませんが、同じマークアップの置き換えの問題の多くは、とにかくその解決策に当てはまります。

誰もこの問題を過去にうまく解決しましたか、または何か提案がありますか？

Answer 1

あなたはマイク・ボストックによってthis exampleのように手動でラッピングを行うことができます。

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);