Kann nicht mehrzeiligen Text auf D3 Kreisdiagramm

Question

Ich habe ein Problem mit mehrzeiligem Text und habe keine Ahnung, und ich brauche Ihre Hilfe, überprüfen Sie diese fiddle.

ich habe sehr wenig Platz für dieses Tortendiagramm, aber die Titel der Artikel sind lang, ist das Problem, egal was ich versuchte ich zu mehrzeiligen brechen könnte nicht, Ich habe versucht, die Breite des Textes zu begrenzen, aber es hat nicht funktioniert , ich denke, Canvas akzeptiert keine CSS-Eigenschaften?

vollständige Code ist in Geige

Problemcode hier:

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

}

danke

Answer 1

Es gibt verschiedene Ansätze, Ihr Problem zu lösen. Einer von ihnen benutzt Mike Bostocks Funktion wrap, um Ihre Textelemente zu brechen. Hier

ist ein Beispiel die Grenze zu 120px Einstellung:

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

Hier ist die aktualisierte Geige: http://jsfiddle.net/zkLyt5fm/