d3円グラフ上に複数行のテキストを作成できません

Question

複数行のテキストに問題があり、手がかりがないので、このfiddleを確認してください。

iがこの円グラフ、 のための非常に限られたスペースを持っていますが、アイテムのタイトルが長い、問題は私がテキストの幅を制限しようとした、複数行に を破るcouldntの私が試しに関係なくはありませんが、それは仕事をdidntの私はキャンバスがCSSプロパティを受け入れないと思いますか？

完全なコードはフィドルにここ

問題のコードです：

var donuts = d3.selectAll("#" + el + ' .donut'); 

donuts.append('text') 
     .attr('class', 'center-txt value') 
     .style('font-size', '16px') 
     .style('fill','rgba(255,255,255,0.8)') 
     .attr('text-anchor', 'middle'); 

donuts.append('text') 
     .append('tspan') 
     .attr('class', 'center-txt type') 
     .attr('y', chart_r * 0.20) 
     .attr('text-anchor', 'middle') 
     .style('font-size', '22px') 
     .style('fill','rgba(255,255,255,0.8)') 
     .text(function(d, i) { 
      return d.type; 
     }); 
donuts.append('text') 
     .append('tspan') 
     .attr('class', 'center-txt percentage') 
     .attr('y', chart_r * 0.20) 
     .attr('text-anchor', 'middle') 
     .style('font-size', '18px') 
     .style('fill','rgba(255,255,255,0.8)') 
     .text(''); 

}

あなたの問題を解決するために様々なアプローチがあります

Answer 1

ありがとうございました。そのうちの1人は、Mike Bostockの関数wrapを使用してテキスト要素を分割しています。ここで

は120ピクセルに制限を設定する例です。ここで

thisDonut.select('.percentage') 
    .attr("dy", 0) 
    .text(function(donut_d) { 
     return d.data.cat 
    }).call(wrap, 120); 

が更新フィドルです：http://jsfiddle.net/zkLyt5fm/