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

Question

我正在弄乱转换,当转换应用于不同功能的选择时,我注意到一些口吃和闪烁.但是,如果使用方法链接应用转换,则它完全按照规定工作.

下面是简单移动一些文字的小例子(小提琴).在转换开始之前,第一个最左边的字符串神奇地传送到页面下方.第二个,最右边的字符串具有从页面的顶部到底部的平滑过渡.

为什么这个'瞬移'会发生？显然,在单独的函数中应用转换与链接它不同,但有没有办法实现这一点？说,我想将相同的过渡应用于许多不同的对象 - 从不同的选择中检索 - 那么有没有办法将过渡转移到自己的功能而不会出现这种口吃？

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()完成，然后应用新的维度。