3

この複数の折れ線グラフの遷移が、基になっているアニメーション化された単一の折れ線グラフと比較して、なぜ不安定なのか疑問に思っています: http://www.animatedcreations.net/d3/lineChartAnimated.html

ここで提供されるフィドル: http://jsfiddle.net/user2477109/QBDGB/

問題はすべてのパスを個別に更新していますか? 非効率なようです。ありがとう。

graph.select(".line1").attr("d", line).attr("transform", null);
graph.select(".line2").attr("d", line).attr("transform", null);
graph.select(".line3").attr("d", line).attr("transform", null);
graph.select(".line4").attr("d", line).attr("transform", null);

// slide the line left
path1
    .transition()
    .duration(duration)
    .attr("transform", "translate(" + x(t-n+1) + ")");

path2
    .transition()
    .duration(duration)
    .attr("transform", "translate(" + x(t-n+1) + ")");

path3
    .transition()
    .duration(duration)
    .attr("transform", "translate(" + x(t-n+1) + ")");

path4
    .transition()
    .duration(duration)
    .attr("transform", "translate(" + x(t-n+1) + ")");

// slide the x-axis left
    axis.transition()
    .duration(duration)
    .ease("linear")
    .call(xAxis)
    .each("end", tick);
4

1 に答える 1

2

.ease('linear')オプションを忘れました：

path1
    .transition()
    .duration(duration)
    .ease("linear")

フィドル: http://jsfiddle.net/chrisJamesC/QBDGB/4/

ここでは、行数をハードコーディングしているため、4行でループするか、行に別のイテレータを使用することを検討する必要があります。

于 2013-06-25T06:35:20.783 に答える