d3.js - 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

尝试增加张力:

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

此外，尝试其他插值(和张力值，但仅适用于“束”和“基数”)，直到找到适合您目的的值。