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中阅读有关不同种类插值的所有内容。（小心，涉及到很多数学理论......）

D3内插线曲线很笨拙并且自身加倍

2 个答案: