链式动画/在每个图节点的转换 - D3.js [英] Chained animations/transitions over each graph node - D3.js

问题描述

我希望能够改变每个节点的半径在我的图，我使用 d3.js <创建/ A>。但是，我想在一个时间改变每个节点，一个的半径，我想能够与节点的序列一起控制每个变化之间的延迟。

I want to be able to change the radius of each node in my graph that i am creating using d3.js. However, i want to change the radius of each node, one at a time, and i want to able to control the delay between each change along with the sequence of the nodes.

现在这是我在code方面：

For now this is what i have in terms of code:

var nodes = svg.selectAll(".node");
nodes.each(function() { 
  d3.select(this).
  transition().
  delay(100).
  attr("r", "5") 
});

的http：// BL

您可以简单地通过使用code。在此链接复制此。 ocks.org/mbostock/4062045 。我在上面已经贴上了code简直是除了code。在上述环节。

You can replicate this simply by using the code at this link: http://bl.ocks.org/mbostock/4062045. The code that i have pasted above is simply an addition to the code at the aforementioned link.

当我在图形过渡同时运行这一点，所有的节点，即生长在大小（半径）同时进行。不过，我希望他们转变，即大小（半径）长，一次一个。我再说一遍，我希望能够控制：

When i run this, all the nodes in my graph transition simultaneously, i.e. grow in size (radius) simultaneously. I however want them to transition i.e. grow in size (radius), one at a time. I repeat that i want to be able to control:

1. 在延迟每个节点的过渡和
之间

2. 节点的经历转变的顺序。

1. the delay between the transition of each node and
2. the order of nodes that undergo the transitions.

任何指针，教程，甚至是其他计算器的答案将是巨大的。我想最好要有些code的例子。

Any pointers, tutorials, or even other stackoverflow answers would be great. I would ideally want some code examples.

我在网上的职权范围来最接近的是本款教程对d3.js转换：的 http://bost.ocks.org/mike/transition/#per-element 。但是，它缺乏一个具体的code例子。我，作为新d3.js和JavaScript一般情况下，我不能把它捡起来如果没有具体code的例子。

The closest i have come to in terms of online references is this subsection of a tutorial on d3.js transitions: http://bost.ocks.org/mike/transition/#per-element. However, it lacks a concrete code example. I, being new to d3.js and javascript in general, am not able to pick it up without concrete code examples.

推荐答案

您可以通过计算基于每个节点的指数延迟做到这一点很容易。迈克·博斯托克有这样一个实现的例子这里。这是相关code：

You can do this quite easily by calculating a delay based on each node's index. Mike Bostock has an example of such an implementation here. This is the relevant code:

var transition = svg.transition().duration(750),
    delay = function(d, i) { return i * 50; };

transition.selectAll(".bar")
    .delay(delay)
    .attr("x", function(d) { return x0(d.letter); }); // this would be .attr('r', ... ) in your case

要控制过渡的顺序，那么所有你必须​​做的是排序数组，这样的元素的指数反映了动画流你想要的。要了解如何数组排序，请参考JavaScript的的的Array.Sort 方法，也看到了阵列>排序 D3的API参考的部分。

To control the order of the transition, all you would then have to do is sort the array so that the elements' indices reflect the animation flow you want. To see how to sort an array, refer to the documentation on JavaScript's array.sort method and also see the Arrays > Ordering section of the D3 API reference.

这篇关于链式动画/在每个图节点的转换 - D3.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！