D3 插值线曲线很乱，并且自身翻倍答案

【问题标题】：D3 interpolated line curve is janky and doubling back on itselfD3 插值线曲线很乱，并且自身翻倍
【发布时间】：2016-09-20 18:58:37
【问题描述】：

我不太确定如何描述这一点。图片基本说明了：

褪色的点是曲线上的点。你可以看到这条线在自身上加倍并重叠。我只是将其设置为：

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

每个点只被绘制一次。我做错了什么？

单调：

和线性：

【问题讨论】：

我有同样的问题...我希望有一个提示来解决这个问题。

标签： d3.js svg interpolation linechart curve

【解决方案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);

另外，尝试其他插值（和张力值，但仅适用于“束”和“基数”），直到找到适合您目的的东西。

【讨论】：

我试图增加紧张感，但这只是将问题降到最低，并没有解决问题。如果我想摆脱这个问题，我需要完全去除插值，只需要一条直线。
你试过高张力的“捆绑”吗？另外，您是否尝试过其他插值（单调、基...）？
捆绑和基础不好，因为我需要线与点相交。 Monotone 有同样的问题（我已将图像添加到我的 OP）
您是否将张力设置为 1（这是最大值）？另外：您的数据中是否只有 5 个数据点？ xScale 是时间尺度吗？
当张力为 1 时，它只是直线，没有曲线。我有 7 分（我把完整的图表放在 OP 上），是的，xScale 是一个时间尺度

【解决方案2】：

我在使用基数曲线插值时遇到了同样的问题，这条线每次都循环回来。将其设置为 MonotoneX 反而给了我想要看到的内容。

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

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

您可以在 d3 here 中阅读有关各种插值的所有信息。（小心，涉及很多数学理论......）

【讨论】：