如何使用d3.js将甜甜圈图的标签拆分为多行

Question

我用甜甜圈图显示标签，如下所示；

this.graphGroup
.selectAll('allLabels')
.data(data_ready)
.enter()
.append('text').style('font-size', '24px')
.text(d => {
return d.data.name;   //LINE 1
})
.attr('transform',`${calculatedValue}`)
.style('text-anchor', 'start');

我想使用这个答案如何在D3图表的标签中包含换行符？但是在添加这样的标签之后添加代码，

this.graphGroup
.selectAll('text')
.each
( function (d) {
var el = this.d3.select(this);
console.log(el);
var words = d.name.split(' ');
console.log(words);
el.text('');
for (var i = 0; i < words.length; i++) {
var tspan = el.append('tspan').text(words[i]);
if (i > 0)
tspan.attr('x', 0).attr('dy', '15');
}
});

当我在第一个选择上使用each((时，我会得到一个错误，说选择是未定义的。我试着在第1行添加代码，但我只能将文本传递到d3.text((.中

如何正确地打破标签？

编辑：我也有一个错误，说我的局部变量d3没有定义，但它在创建graphGroup和所有其他选择时都有效，然后我直接从d3导入了select。

Answer 1

我找到了答案；如果在该选择上调用了data((函数，each((就不起作用，因此直接从链接帖子中得到的答案将不起作用。

另一个选项是对生成的每个文本元素使用call((，如下所示；

this.graphGroup
.selectAll('allLabels')
.data(data_ready)
.enter()
.append('text').style('font-size', '24px')
.attr('transform',`${calculatedValue}`)
.style('text-anchor', 'start')
.text(d => {
return d.data.name;
})
.call(lineBreak, 40);

在lineBreak是我定义的另一个函数的情况下，传递到函数中的第一个参数将是对循环元素的引用，在这种情况下，是不同的文本元素。

换行功能：

function lineBreak(text, width) {
text.each(function () {
var el = d3.select(this);
let words = el.text().split(' ');
let wordsFormatted = [];
let string = '';
for (let i = 0; i < words.length; i++) {
if (words[i].length + string.length <= width) {
string = string + words[i] + ' ';
}
else {
wordsFormatted.push(string);
string = words[i] + ' ';
}
}
wordsFormatted.push(string);
el.text('');
for (var i = 0; i < wordsFormatted.length; i++) {
var tspan = el.append('tspan').text(wordsFormatted[i]);
if (i > 0)
tspan.attr('x', 0).attr('dy', '20');
}
});
}

将优化此功能并稍后进行编辑。谢谢