javascript - 为什么在单独的函数中应用时转换会闪烁/断断续续(D3)

Question

我正在处理过渡，当过渡应用于不同函数中的选择时，我注意到有些卡顿和闪烁。但是，如果转换与方法链一起应用，它会完全按照规定工作。

下面是简单移动一些文本的小例子(Fiddle)。在过渡开始之前，最左边的第一个字符串神奇地传送到页面下方。最右边的第二个字符串从页面顶部到底部平滑过渡。

为什么会发生这种“传送”？显然，在单独的函数中应用转换与链接它不同，但有没有办法实现这一点？比方说，我想对许多不同的对象应用相同的过渡——从不同的选择中检索——那么有没有办法在不出现这种卡顿的情况下将过渡降级为它自己的功能？

var svg = d3.select('svg');
var textElem = svg.append('text')
    .data(['hello world'])
    .attr('x', 30)
    .attr('y', 100)
    .attr('fill', '#000')
    .attr('id', 'a')
    .text(function (d) {
        return d;
    });
var textElem2 = svg.append('text')
    .data(['some text'])
    .attr('x', 230)
    .attr('y', 100)
    .attr('fill', '#000')
    .attr('id', 'a')
    .text(function (d) {
        return d;
    });
setTimeout(foo, 3000);

function foo() {
    textElem.data(['hello world, again!']);
    applyTextTransitions(textElem);
    textElem.attr({
        x: 30,
        y: 150
    });
    textElem.text(function (d) {
        return d;
    });

    textElem2.data(['some more text!'])
        .transition()
        .duration(1000)
        .style('opacity', 0)
        .transition()
        .duration(1000)
        .style('opacity', 1)
        .attr({
            x: 230,
            y: 150
        })
        .text(function (d) {
            return d;
        });
}

function applyTextTransitions(element) {
    element
        .transition()
        .duration(1000)
        .style('opacity', 0)
        .transition()
        .duration(1000)
        .style('opacity', 1);
}

Answer 1

我没有用过 d3，但你的意思是这样做吗？

applyTextTransitions(textElem, { x: 30, y: 150 }); 

function applyTextTransitions(element, newPos) {
    element
    .transition()
    .duration(1000)
    .style('opacity', 0)
    .transition()
    .duration(1000)
    .attr(newPos)
    .style('opacity', 1)
    .text(function(d){
        return d; 
     }); 
}

https://jsfiddle.net/k8kv4arv/3/

“跳转”的发生是因为调用函数一直等到 applyTextTransitions() 完成，然后应用新的尺寸。