Question

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

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

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

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

Answer 2

我知道我迟到了，但是......

你得到的口吃只是因为你调用过渡函数applyTextTransition，然后立即改变元素的位置。

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

这就是你得到不必要的口吃的原因。

此外，重用应用转换的函数的正确D3方法是使用selection.call。这允许您声明一个函数，并使用call方法来调用应用转换的函数。

textElem.call(applyTextTransition);

function applyTextTransition(selection) {
  // perform selection.transition()
}

您现在可以在链接中使用您的功能，并且您不仅限于将该功能用于当前选择。

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

2 个答案: