3

I have a graph comprised up of areas, lines and circles that I am trying to update on user input, which I have already gotten to work, but when transitioning from a lower data amount to a higher amount, say from [4,2,3,4,5] to [2,4,3,1,5,8,6], the lines animate their current paths to their new positions, but the offset just gets snapped into place, there is no animation for any new values added to the paths.

What I would like it to do is animate from the current line path, to the new line path, with a smooth transition, so that the new values don't just snap into place, regardless of the number of data.

Also, on a side note, the graphs width keeps changing on update, I'd like it to stretch to the full width of the svg no matter how much data is present, how could I achieve that?

Here is a fiddle of what I have thus far http://jsfiddle.net/znmBy/.

I hope I was clear enough, I am new to D3 so I am a little unsure about the terminology.

4

1 に答える 1

2

D3では、最初に固定位置にオブジェクトを追加する必要があり、次に元の位置から別の位置にアニメーション化できるため、説明する問題はもう少し複雑です。

あなたの例では、以前の値に基づいて新しい（中間の）初期位置を計算してから、実際の最終値でチャートを再度更新します。これにより、開始位置から最終位置までのパスアニメーションが作成されます。

    updateGraph([
            [...].concat(computeLatestIntermediates()),
            [...].concat(getLatestTimes())
          ]);

    updateGraph([
            [...].concat(getRealValues()),
            [...].concat(getLatestTimes())
          ]);

または、初期値をに設定することもできます0。これにより、下からターゲット値までの素敵なアニメーションが作成されます。

    updateGraph([
            [..., 0, 0, 0, 0],
            [...,10,12,13,14]
          ]);

    updateGraph([
            [..., 234, 245, 210, 170],
            [...,  10,  12,  13,  14]
          ]);

ところで：折れ線グラフをアニメーション化するとき、通常、他のいくつかの問題があります。それらのいくつかは、マイクのパスアニメーションページでカバーされています。ここにも関連する質問があります。

編集（よりスマートなソリューション）：

update関数を2回呼び出す代わりに、次のように描画関数内に次の2段階の描画を実装できます。

function getPathData(d,i)        { return "M 0,0 ... L n,n"; }
function getInitalTransform(d,i) { return "translate(...)";  }
function getFinalTransform(d,i)  { return "translate(...)";  }

path
    .attr("d", getPathData)
    .attr("transform", getInitalTransform)
  .transition()
    .ease("linear")
    .attr("transform", getFinalTransform);
于 2012-12-06T16:29:45.277 に答える