Question

对这个问题抱歉 - 我知道有类似的问题被提出 - 但我无法找到解决我特定问题的方法。

JS小提琴：http://jsfiddle.net/TheDarkne55/tmkbLk4b/2/
这是基本的FD图形示例，稍加修改并添加了我的代码：

    /* --- MY CODE START --- */     
var intervalID = setInterval(animationTick, 1000);

function animationTick() {

    var randomInt = Number(getRandomInt(0, 5));
    var currentRadius = Number(node.attr("r"));
    var newRadius = Number(currentRadius + randomInt);

    node.attr("r", function (d) {return currentRadius + randomInt;});   
}
/* --- MY CODE END --- */

我得到了什么：
我的真实例子要复杂得多，这对于这个问题并不重要这只是一个简单的图表。我添加了一个animationTick（）函数，以便我可以控制它被调用的频率。

我想要的是什么：
我希望圈子能够按照我的要求（长大和缩小）进行动画制作。（在这个小提琴我刚刚添加了“成长”部分）此示例中的简单算法只是尝试将随机int添加到当前半径。因此，每个节点/圆圈以不同的半径开始，我希望它们在增加相同数量时保持不同的大小。但相反，它们的大小相同。

问题：
1.我是D3 JS的新手，并且不太了解d3元素的迭代如何以不同的方式工作 2.在这个例子中，正如你在第一个触发器上看到的，而不是所有增加他们的当前半径的相对数量，它们都变成相同大小，然后以这种方式继续

我确定这只是在正确迭代节点或节点数据的问题，我也试过直接操作它们，但我已经被困了一段时间了。

非常感谢任何正确方向的指示。

D3 JS - 强制图 - 单独动画节点

0 个答案: