我正在用我的甜甜圈圖顯示標簽，如下所示；
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 匯入選擇。
uj5u.com熱心網友回復：
我想出了答案；如果在該選擇上呼叫了 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');
}
});
}
將優化此功能并稍后編輯。謝謝！
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/407875.html
標籤：
下一篇：設定多天時本地通知未觸發