javascript - オンラインでの D3js 移行が機能しない

Question

javascriptと を使用して Web ページにグラフを表示しようとしていますD3js。

http://bost.ocks.org/mike/path/の例に従って、そこに示されているグラフの機能を開始および拡張しました。

ただし、トランジションを使用してグラフをスムーズに更新しようとすると、いくつかの問題に直面しています。

これは、いくつかの追加コメントを含む私の更新関数のコードです

updateChart= function(){  

            //generate a new point, integer [0 5]
    var newPoint=Math.floor(Math.random() * 5);

    data.push(newPoint);

    // redraw the line
    path
    .attr("d", line)
    .attr("transform", null);

    //update x domain for axis labels - 
    //the new domain is the same as before slided by 1 position
    xDomain=[(xDomain[0]+1),(xDomain[1]+1)];
    xScale.domain(xDomain);

    //slide xAxis       
    svg.select(".x.axis")
    .transition()
    .duration(500)
    .call(xAxis);     //xAxis is my scale function and works fine for labels and data display

    //slide the line to the left  
    path
    .transition()
    .duration(500)
    .ease("linear")
    .attr("transform", "translate(" + xScale(xDomain[0]) + ")");

    // pop the old data point off the front
    data.shift();

};

私の問題は、軸ラベルが 1 つの位置だけ左に正しくスライドし、0.5 秒でスムーズにスライドする一方で、線が更新された位置にすぐに「ジャンプ」し、チュートリアルのようにスムーズに移行しないことです。

y 軸の範囲を更新すると、同様のことが起こります。軸はスムーズに変化し、新しい線はすぐに新しいスケールにジャンプします。

更新: jsfiddle へのリンクは次のとおりです: [削除、評判が不十分です。バージョン 6 の update 2 の同じ jsfiddle です]

更新 2 y 軸スケールの変更も含む jsfiddle の作業コードをここで見つけてください。また、y 軸のスケールを変更すると、表示されるデータが 1 ポジションずれることにも注意してください。また、この動作に関するご意見もいただければ幸いです。ありがとう！【削除、評判不足。バージョン 8 の update 2 の jsfiddle と同じです]

解決済み

他の例を数時間試して読んだ後、私は問題を解決することができました

• x 軸に沿った遷移に関して、問題は、以前の xScale(xDomain[0]) ではなく xScale(xDomain[0]-1) を供給する必要がある遷移パラメーターにありました。

• 異なるスケール間の移行に関して、問題は、yScale を更新する前に発生するはずの行の最初の再描画にありました。線を移動させることで

  path
  .attr("d",line)
  .attr("transform", null);
  

その上

    yScale.domain(yDomain); 

移行はスムーズに行われます。

これが他の人の時間を節約することを願っています。ここで作業コードを見つけることができます http://jsfiddle.net/4Z2FY/10/

ChrisJamesC の質問によると、y 軸範囲の更新に関連するコードは次のとおりです。

updateRange= function(newDomain){
//update domain
    yDomain=newDomain;

//redraw line BEFORE changing the yScale function 
    path
    .attr("d",line)
    .attr("transform", null);

    //change scale
    yScale.domain(yDomain); 

    //switch to new scale
    svg.select(".y.axis")
    .transition()
    .duration(750)
    .call(yAxis);

    // update the line
    path
    .transition()
    .duration(750)
    .attr("d", line)
    .attr("transform", null);    
}