Question

我在使用多行文字时遇到问题并且没有任何线索，我需要您的帮助，请查看fiddle。

这张饼图的空间非常有限，但项目的标题很长，问题是我试过的我无法打破多线，我试图限制文本的宽度，但它没有工作，我认为画布不接受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

有不同的方法可以解决您的问题。其中一个是使用Mike Bostock的函数wrap来打破你的文本元素。

以下是将限制设置为120px的示例：

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

这是更新的小提琴：http://jsfiddle.net/zkLyt5fm/

无法在d3饼图

1 个答案: