Javascript D3中带圆的过渡

我已经设置了一个带有过渡的D3圆形动画。我使用最小日期作为初始数据点，最大日期作为转换的最终数据点。我的问题是:

我使用的是一个相当大的数据集，我担心因为我只是告诉转换从最小值到最大值，它会错过中间的所有其他点，例如，如果圆a在中间有一个疯狂的跳跃呢？当我测试它时，它似乎跳过了跳跃

---

是否有更好的方法来设置转换以考虑中间的所有点

如果您告诉对象从最小值转换为最大值，它将只考虑这两个值，并且正如您所说的，它将跳过中间任何有趣的跳跃

我猜你现在只需输入所有数据就可以绘制一次图表。相反，您可以逐步将数据推送到图表中：

var data = [{id: o1, v: []}, {id: o2, v: []}]; // values for 2 objects

function getTransform(d) {
    return "translate(" + d.v[d.v.length-1] + ")";
}

function update() {
  var elems = d3.selectAll(...).data(data, function(d) {return d.id;})
  elems.enter()
      .append(...) //append DOM/SVG objects and
      .attr(...)   //initalize their start values and
      .attr("transform", getTransform )  //their start animation values

  // animate the existing elements to move to their new values
  elems.transition().attr("transform", getTransform )
}

function play(){
    // pushing in "crazy" values
    data[0].v.push( Math.random()*10 );
    data[1].v.push( Math.random()*10 );
    update();
}

setTimeout(play, 500)
setTimeout(play, 1000)
setTimeout(play, 1500)

其基本思想是不要一次将所有数据抛出d3，而是按照您希望的顺序和及时性添加数据

此外，或者您也可以设置时间索引，并在

getTransform

函数中使用它来设置动画，使其达到所需的任何状态。如果一步一步地执行此操作，则会使动画使用“疯狂”值

var-time=0；
var-maxTime=2；
函数转换（d）{
返回“translate”（+d.v[time]+”）；
}
函数next（）{
更新（）；
if（time++

---

您可能需要将超时值

500

与所需的动画

持续时间（…）

速度相匹配，以使动画达到疯狂的峰值。否则d3可能会平滑动画路径（如果更新速度比动画快）。

这就是你所说的圆形动画吗？是的，我正在制作的动画与此非常相似。顺便说一句，如果你对答案满意，请接受。我最终使用了非常相似的方法，分批发送值，每批包含气泡的x，y值。谢谢你的主意！

var time = 0;
var maxTime = 2;

function getTransform(d) {
    return "translate(" + d.v[time] + ")";
}

function next(){
    update();
    if(time++ < maxTime) setTimeout(next, 500)
}

play(); play(); play(); // add some data ;)
next()   // start index based playback from `time` to `maxTime`