Question

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

我正在使用一个相当大的数据集，我担心因为我只是告诉过渡从最小到最大，它会遗漏其中的所有其他点，例如，如果圆圈A有一个疯狂跳进去之间？当我测试它时，似乎它刚刚跳过跳跃。

是否有更好的方法将转换设置为中间所有点的帐户？

Answer 1

如果你告诉对象从最小值转换到最大值，它只会尊重这两个值，正如你所说的那样，它会跳过任何有趣的跳跃。

我猜你现在通过推送所有数据来绘制一次图表。相反，您可以逐步将数据推送到图表：

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;

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`

您可能需要将超时值500与所需的动画duration(..)速度相匹配，以使动画达到疯狂的峰值。否则d3可能会平滑动画路径（如果您更新的速度比动画更快）。

D3中的圆圈过渡

1 个答案: