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

Question

我遇到了关于多行文本的问题，毫无头绪，需要你的帮助。请查看这个示例。

我的饼图空间非常有限，但是项目的标题很长，问题在于无论我尝试什么方法都无法换行，即使我尝试限制文本的宽度也没有用。我认为画布不接受 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('');

}

thank you

- Haris Sokoli

---

你为什么在标题中加入了“canvas”并使用canvas标签呢？那是SVG，不是画布（canvas）。 - Gerardo Furtado

是的，抱歉我的错，元素是以相同的方式创建的，我感到困惑，谢谢你的帮助。 - Haris Sokoli

Answer 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/

- Gerardo Furtado