d3.js内の複数行の遷移

Question

http://bl.ocks.org/mbostock/1642874の折れ線グラフに別の行を追加しようとしています。

コードは、私は基本的にdata2 = d3.range(n).map(random);で別のデータセットを作成しようと、新しいデータセットの行を追加し（元のコードと同じコードを使用するが、データセットの変数名を変更）している

var n = 40, 
    random = d3.randomNormal(0, .2), 
    data = d3.range(n).map(random); 

var svg = d3.select("svg"), 
    margin = {top: 20, right: 20, bottom: 20, left: 40}, 
    width = +svg.attr("width") - margin.left - margin.right, 
    height = +svg.attr("height") - margin.top - margin.bottom, 
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

var x = d3.scaleLinear() 
    .domain([0, n - 1]) 
    .range([0, width]); 

var y = d3.scaleLinear() 
    .domain([-1, 1]) 
    .range([height, 0]); 

var line = d3.line() 
    .x(function(d, i) { return x(i); }) 
    .y(function(d, i) { return y(d); }); 

g.append("defs").append("clipPath") 
    .attr("id", "clip") 
    .append("rect") 
    .attr("width", width) 
    .attr("height", height); 

g.append("g") 
    .attr("class", "axis axis--x") 
    .attr("transform", "translate(0," + y(0) + ")") 
    .call(d3.axisBottom(x)); 

g.append("g") 
    .attr("class", "axis axis--y") 
    .call(d3.axisLeft(y)); 

g.append("g") 
    .attr("clip-path", "url(#clip)") 
    .append("path") 
    .datum(data) 
    .attr("class", "line") 
    .transition() 
    .duration(500) 
    .ease(d3.easeLinear) 
    .on("start", tick); 

function tick() { 

    // Push a new data point onto the back. 
    data.push(random()); 

    // Redraw the line. 
    d3.select(this) 
     .attr("d", line) 
     .attr("transform", null); 

    // Slide it to the left. 
    d3.active(this) 
     .attr("transform", "translate(" + x(-1) + ",0)") 
    .transition() 
     .on("start", tick); 

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

} 

あります

g.append("g") 
    .attr("clip-path", "url(#clip)") 
    .append("path") 
    .datum(data2) 
    .attr("class", "line") 
    .transition() 
    .duration(500) 
    .ease(d3.easeLinear) 
    .on("start", tick); 

他のランダムな点を含む行が追加されますが、アニメーションはもはや滑らかではありません。

アニメーションを滑らかにするものがわかりません。

私はnにn - 1を変更した場合、私は、これは滑らかさを変更する理由は、私が見ることができない、すなわち

var x = d3.scaleLinear() 
    .domain([0, n]) 
    .range([0, width]); 

に

var x = d3.scaleLinear() 
    .domain([0, n - 1]) 
    .range([0, width]); 

を変更し、元のコードと同じ問題を取得します。あなたのリンク要旨で述べた

Answer 1

In the tutorialそれはドメインであるべき理由、マイク・ボストックは説明する：

新しいデータポイントが到着すると、私たちは瞬時にラインを再描画し、（もしあれば）変換前のを削除します。したがって、新しいデータポイントは、最初はグラフの右端から見えなくなります。次に、パス要素のxオフセットを0からいくつかの負の値にアニメーション化し、左にスライドさせます。

以下少しは、と彼は付け加えた：

あなたはパスデータのスプライン補間を使用している場合は、このように制御データポイントを追加すると、前回の制御点の接線を変更することに注意してください、と関連するセグメントの形状コントロールポイントが変更されたときに別の揺れを避けるには、追加のコントロールポイントが非表示になるように可視領域（xドメイン）をさらに制限します。

そして、あなたは、マイク・ボストックは書き込みin the next gistことがわかります：

を基礎補間を使用してパスに変換を移行するときの変化ように、次の2つの追加の制御点でパスをクリッピングする必要がありますパスが左にスライドしている間、接線は表示されません。

、以下のようにXスケールが作成される。

var x = d3.scaleLinear() 
    .domain([1, n - 2]) 
    .range([0, width]); 

ドメインのみn-2に移行するので、その後、n-1とn点が（clipPathによる）視界から隠されます。