Question

我正在尝试使用line chart制作D3。这是我的代码。我收到了这个错误：

插值不是函数

https://jsbin.com/ruvumocijo/edit?html,output

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.4/d3.js"></script>

    <script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
</head>
<body>

<script>
     var w = 200,
        h = 200,
        data = [{
            month: 2,
            winper: 20
        }, {
            month: 4,
            winper: 80
        },{
                month: 6,
                winper: 90
            }];
    var svg = d3.select('body').append('svg').attrs({
        width: w,
        height: h
    })
    var line_one= d3.line().x(function (d) {
         return d.month*2
     }).y(function (d) {
        return h- (d.winper*3)
    }).interpolate("linear")

    svg.append("path").attrs({
        d:line_one(data),
        fill:"none",
        "stroke-width":2,
        "stroke":"blue"
    })

</script>
</body>
</html>

Answer 1

interpolate已在d3版本4（您使用的版本）中删除。根据更改documentation：

4.0引入了一个新的曲线API，用于指定线和区域形状在数据点之间进行插值的方式。 line.interpolate和 area.interpolate方法已被line.curve和 area.curve。曲线是使用曲线界面实现的而不是作为返回SVG路径数据串的函数;这允许要渲染到SVG或Canvas的曲线。另外，line.curve和 area.curve现在采用一个函数来实例化给定的曲线上下文，而不是字符串。

如果您想要线性插值，它是默认值，您不需要指定任何内容：

var line_one= d3.line().x(function (d) {
  return d.month*2
}).y(function (d) {
  return h- (d.winper*3)
});

为什么插值不是d3中的函数

1 个答案: