D3 интерполированная кривая линии janky и удвоение обратно на себя

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

Try увеличить напряжение:

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. (Осторожно, много теории математики связано ...)