javascript - 在 D3 中应用包装功能后，文本刷新到初始状态

Question

我有以下函数用于在 D3 中包装文本，取自 this回答:

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
            x = text.attr("x"),
            y = text.attr("y"),
            dy = 0, //parseFloat(text.attr("dy")),
            tspan = text.text(null)
                        .append("tspan")
                        .attr("x", x)
                        .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", x)
                            .attr("y", y)
                            .attr("dy", ++lineNumber * lineHeight + dy + "em")
                            .text(word);
            }
        }
    });
}

我按以下方式初始化节点:

const nodes = [1, 2, 3]
const nodesTextsEnter = vis.g.selectAll('text.node').data(nodes).enter()
const nodesTextsUpdate = vis.g.selectAll('text.node').data(nodes)
vis.g.selectAll('text.node').data(nodes).exit().remove()
        
nodesTextsEnter.append('text')
                .attr('x', (d, i) => i*30)
                .attr('y', (d, i) => i*30)
                .attr('text-anchor', 'middle')
                .attr('dominant-baseline', 'middle')
                .attr('font-size', 12)
                .style('cursor', 'pointer')
                .attr('class', 'node')
                .attr('opacity', '0')
                .transition()
                .attr('opacity', '1')
                .attr('x', (d, i) => i*30)
                .attr('y', (d, i) => i*30)
                .text('This is a long text')
                .call(wrap, 30)

nodesTextsUpdate
                .transition(transitionDuration)
                .attr('x', (d, i) => i*30)
                .attr('y', (d, i) => i*30)
                .text('This is a long text')
                .call(wrap, 30)

问题是，在调试 wrap 函数时，我看到节点发生了所有包装更改，但在某个时候(具体来说，我认为它发生在 timerFlush() 上 在 timer.js 的 wake 函数中)节点的内容被刷新，就好像它从未被包装过一样。

为什么会发生这种情况？欢迎任何想法。

Answer 1

如果您在转换前设置文本内容，您的代码就可以工作:

nodesTextsEnter.append('text')
    .attr('x', (d, i) => i*30)
    .attr('y', (d, i) => i*30)
    .attr('text-anchor', 'middle')
    .attr('dominant-baseline', 'middle')
    .attr('font-size', 12)
    .style('cursor', 'pointer')
    .attr('class', 'node')
    .attr('opacity', '0')
    .text('This is a long text') // this line was moved up
  .transition()
    .attr('opacity', '1')
    .attr('x', (d, i) => i*30)
    .attr('y', (d, i) => i*30)
    .call(wrap, 30);

否则，wrap中d3.select(this).text()的值为空，因此words只包含空的字符串。