1

トランジション付きのD3サークルアニメーションを設定しました。遷移の初期データポイントとして最小日付を使用し、最終データポイントとして最大日付を使用しています。私の質問は：

私はかなり大きなデータセットを使用していますが、最小から最大への遷移を指示しているだけなので、その間の他のすべてのポイントを見逃してしまうのではないかと心配しています。の間に？私がそれをテストしたとき、それはちょうどジャンプをスキップしたように見えました。

間にあるすべてのポイントを考慮して遷移を設定するためのより良い方法はありますか？

4

1 に答える 1

2

オブジェクトに最小から最大に変換するように指示すると、オブジェクトはこれら2つの値のみを尊重し、あなたが言ったように、その間の面白いジャンプをスキップします。

現在、すべてのデータをプッシュしてチャートを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がアニメーションパスをスムーズにする可能性があります（アニメーションよりも速く更新する場合）。

于 2012-11-09T20:51:25.337 に答える