D3補間された線のカーブがジャンクであり、それ自体が倍増します

Question

これをどのように記述するのかは分かりません。画像は基本的にそれを説明しています：

濃い色の点は曲線上の点です。線が倍増して重なり合っているのが分かります。私はちょうどそれに設定しています：

var lineGenerator = d3.svg.line() 
    .x(function(d) { 
     return xScale(d.date_spaced); 
    }) 
    .y(function(d) { 
     return yScale(d.score); 
    }) 
    .interpolate('cardinal'); 

そして、各点は一度プロットされています。私は間違って何をしていますか？

モノトーンで：

と直線：

Answer 1

緊張を高めるようにしてください：

また

var lineGenerator = d3.svg.line() 
    .x(function(d) { 
     return xScale(d.date_spaced); 
    }) 
    .y(function(d) { 
     return yScale(d.score); 
    }) 
    .interpolate('cardinal').tension(0.95); 

、他の補間（および張力値を試してみたが、あなたの目的に合ったものを見つけるまで、「バンドル」と「枢機卿」のためだけに）。

Answer 2

私は、カーディナルカーブ補間を使用して同じ問題を抱えていました。代わりにMonotoneXに設定すると、私が見たいと思ったものが私に与えられました。

var lineGenerator = d3.svg.line() 
    // ... 
    .interpolate('cardinal'); 

var lineGenerator = d3.svg.line() 
    // ... 
    .interpolate('monotoneX'); 

あなたはD3 hereで補間の種類についてのすべてを読むことができます。 （注意深く、数学理論がたくさん...）