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

Question

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

我正在尝试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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mar*_*ark 5

interpolate已删除d3版本4(您正在使用的版本).从更改文档:

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，6 月前
查看次数：	1712 次
最近记录：	8 年，5 月前