(D3)数据驱动的文档-过渡重复 [英] (D3) Data Driven Documents -- Transition Repetition

问题描述

我已经寻找了3个多小时，试图找到一种无限期地链接过渡的方法...

I've looked for over 3 hours now trying to find a way to chain transitions indefinitely...

我唯一的解决方案是将代码包装在一个函数中，然后使用setInterval重复调用该函数或等待过渡结束"事件

My only solution is wrapping the code in a function, then repeatedly calling the function with setInterval or waiting for the transition 'end' event

示例一班轮:

d3.selectAll('circle').data([1,2,3]).enter().append('circle').attr('cy':function(d){return d * 100},'cx':function(){Math.random() * window.innerWidth},'r':'10px')

//sets initial locations for circles that are created to match data array

.transition().attr('cy':function(){Math.random() * window.innerHeight},'cx':function(){Math.random() * window.innerWidth}})
.transition().attr('cy':function(){Math.random() * window.innerHeight},'cx':function(){Math.random() * window.innerWidth}})
.transition().attr('cy':function(){Math.random() * window.innerHeight},'cx':function(){Math.random() * window.innerWidth}})
.transition().attr('cy':function(){Math.random() * window.innerHeight},'cx':function(){Math.random() * window.innerWidth}})
.transition().attr('cy':function(){Math.random() * window.innerHeight},'cx':function(){Math.random() * window.innerWidth}})

//I'm looking for something that can repeat the transition without using setInterval)

推荐答案

我认为您将不得不将过渡设置包装在一个函数中，以便您可以递归调用它.但是，@ Jon S.是正确的，您可以使用转换的"end"事件而不是单独的计时器.

One way or another, I think you're going to have to wrap your transition settings in a function, so that you can call it recursively. However, @Jon S. is right, you can use the transition's "end" event instead of a separate timer.

复杂的是，(如方法名所示)transition.each("end", callback)中的回调函数是为数组中的 each 元素调用的.一个简单的检查可以确保对于第一个元素，递归仅发生一次，并且不会无限分支.

The complication is that the callback function in transition.each("end", callback) is (as the method name suggests) called for each element in the array. A simple check can make sure the recursion only happens once, for the first element, and doesn't branch indefinitely.

这里是一个示例: http://fiddle.jshell.net/UD9ng/1/

关键代码:

var moving = false;

function move(selection) {

    moving = true;
    selection.transition().duration(5000).ease("sin-in-out")
        .attr("cx", function(){return Math.random()*width;})
        .attr("cy", function(){return Math.random()*height;})
        //.call(move); //stack overflow error!
        .each("end", function(d,i){ 
            if (!i) circles.call(move); //only run for i==0
        });

}

从注释中可以看到，我尝试使用过渡的.call()方法(该方法为整个过渡对象调用一次函数)，但是目前无法将调用延迟到过渡结束之前，因此将重复的子转换调用添加到队列中，直到控制台吐出一个错误，并在其后方留下大量堆栈跟踪信息.奇怪的是，看起来没有什么错，因为所有排队的过渡仍在平稳进行中-但最终它们会耗尽过渡.

As you can see from the comments, I tried using the transition's .call() method (which invokes a function once for the entire transition object), but there is no way currently to delay that call until the end of the transition, so repeated sub-transition calls were being added to a queue until the console spit out an error with a huge stack trace behind it. The weird thing was, it didn't look like anything was wrong, since all the queued-up transitions were still moving smoothly -- but they would have run out of transitions eventually.

每/结束"方法(在原始选择上调用了递归函数)将替换完成的过渡，而不是与其链接，因此它可以无限期地继续，而不会消耗更多的资源.

The each/end approach -- with the recursive function called on the original selection -- replaces the finished transition instead of chaining to it, so it can continue indefinitely without consuming increasing resources.

这篇关于(D3)数据驱动的文档-过渡重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！