2

I have created a multi line chart with a simple animation. In the beginning there are no data and after clicking a button new values are emulated and the line "move" left. The move is animated using a "shift".

The problem occurs when the lines "fill" the whole graph area (that means there are y values for all x values) and then the lines are animated in a different way. It looks like the y values are animated on a curve, not slided to the left.

The animation works good for both axes:

svg.selectAll("g .x.axis")
  .transition()
  .duration(500)
  .ease("linear")
  .call(xAxis);
svg.selectAll("g .y.axis")
  .transition()
  .duration(500)
  .ease("linear")
  .call(yAxis);

And not for lines (this code helped me a lot)

svg.selectAll("g .city path")
  .data(processedData).transition().duration(500)
  .ease("linear")
  .attr("d", function(d, i) { return line(d.values); })
  .attr("transform", null);

The Fiddle is accessible here.

Thanks for help.

4

2 に答える 2

2

この問題は 2 ステップで回避できます。

関数内update() : .data()を最後に新しいポイントで再描画しますが、最初の古いポイントを削除せずに (アニメーションで)、各キーが遷移の前後で同じであるようにします。

関数 update()の最後: 古い値を削除し、アニメーションなしで.data()を再描画できます。

于 2013-04-18T21:13:18.050 に答える