无法在 d3 饼图上制作多行文本

Question

我在处理多行文本时遇到了问题，没有任何线索，我需要你的帮助，请查看此 fiddle。

我对这个饼图的 space 非常有限，但是项目的标题很长，问题是无论我尝试什么我都无法打破多行，我试图限制文本的宽度但没有用，我认为 canvas 不接受 css 属性？

完整代码在fiddle

问题代码在这里：

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

有多种方法可以解决您的问题。其中之一是使用 Mike Bostock 的函数 wrap 来分解文本元素。

这是将限制设置为 120 像素的示例：

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

这是更新后的 fiddle：http://jsfiddle.net/zkLyt5fm/

无法在 d3 饼图上制作多行文本

Can't make multiline text on d3 pie chart

angular

d3.js

svg

multiline