我正在嘗試創建一個餅圖，并在https://bl.ocks.org/mbostock/7555321和這個https://jsfiddle.net/05nezv4q/20/中找到了這兩個示例，其中添加了一些文本。但是，我使用的是打字稿和 D3 v7.6.1，文本換行不起作用。另一個問題是我在我的反應應用程式中使用箭頭函式，我不知道如何在箭頭函式中參考它： d3.select(this)
誰能幫我解決這兩點：如何在箭頭函式中參考它，以及如何將下面的 wrap 函式轉換為在 typescript 和 d3 v7.6.1 中作業？
謝謝，請記住，因為我是編程新手。
d3.selectAll("svg").append("text")
.text("This is a circle with some text in it.")
.attr("x", 20)
.attr("y", 20).call(wrap, 100);
function wrap(text, width) {
text.each(function() {
var text = d3.select(this),
words = text.text().split(/\s /).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.1, // ems
y = text.attr("y"),
dy = parseFloat(text.attr("dy")),
tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(" "));
line = [word];
tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", lineNumber * lineHeight dy "em").text(word);
}
}
});
}
試圖找到一個解決方案或一些解釋，將我指向正確的方向，但沒有找到一個，因為所有示例都參考了舊版本的庫。
uj5u.com熱心網友回復：
在示例https://bl.ocks.org/mbostock/7555321中，文本元素由軸生成器創建，它在呼叫wrap函式之前在這些元素上設定 dy 屬性。在您的小提琴中，未設定 dy 屬性，因此parseFloat(text.attr("dy"))回傳NaN。
例如，在您的文本元素上添加一個dy屬性或在決議它時添加一個默認值parseFloat(text.attr("dy" || "0")
關于 react 應用程式中的箭頭函式，如果需要保留它們，則可以使用 d3 在呼叫時提供的函式的引數selection.each()：
select.each((d, i, nodes) => {
var text = d3.select(nodes[i]);
}
看看這里的檔案：https ://github.com/d3/d3-selection
nodes[i]是當前的 DOM 元素，相當于非箭頭函式中的this 。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/527361.html
下一篇：帶有連接節點的鏈接的聚集氣泡