Can't make multiline text on d3 pie chart

Question

I'm having a problem with multiline text and have no clue and I need your help, check this fiddle.

i have very limited space for this pie chart, but the titles of items are long, the problem is no matter what i tried i couldnt break to multiline, i tried to limit the width of text but it didnt work, i think canvas not accepting css properties?

complete code is in fiddle

problem code here:

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

}

thank you

Answer 1

There are different approaches to solve your problem. One of them is using Mike Bostock's function wrap, to break your text elements.

Here is an example setting the limit to 120px:

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

Here is the updated fiddle: http://jsfiddle.net/zkLyt5fm/