D3插值線曲線非常複雜並且自身翻倍

褪色點是曲線上的點。你可以看到這條線自身重疊並重疊。我只是將它設置爲：

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

而且每個點只被繪製一次。我究竟做錯了什麼？

並與單調：

和線性：

來源

2016-09-20 morgoe

我有同樣的問題......我希望有一個提示來解決這個問題。 –

嘗試增加張力：

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);

另外，嘗試其它插值（和張力值，但只是爲了「捆綁」和「主要」），直到你找到適合你的目的的東西。

來源

2016-09-21 06:23:29

我試圖增加緊張感，但只是最大限度地減少了這個問題，它並沒有擺脫它。如果我想擺脫這個問題，我需要徹底刪除插值，只需要一條直線。 – morgoe

您是否嘗試過緊張的「捆綁」？另外，您是否嘗試過其他插值（單調，基準...）？ –

Bundle和Basis並不好，因爲我需要線條來交叉點。單調有同樣的問題（我已經將圖像添加到我的OP） – morgoe

我使用基數曲線插值時遇到了同樣的問題，每次都會回來。將其設置爲MonotoneX反而給了我正是我想看到的。

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

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

你可以閱讀所有關於D3 here不同類型的插值的。（小心，涉及很多數學理論......）

來源

2017-08-02 16:33:44 Peemster

D3插值線曲線非常複雜並且自身翻倍

回答

相關問題