why interpolate is not a function in d3

Question

I'm trying to make line chart using D3. Here is my code. I am getting this error:

interpolate is not a function

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>

score 5 · Answer 1 · answered Apr 01 '17 at 20:41

interpolate has removed in d3 version 4 (the version you are using). From the changes documentation:

4.0 introduces a new curve API for specifying how line and area shapes interpolate between data points. The line.interpolate and area.interpolate methods have been replaced with line.curve and area.curve. Curves are implemented using the curve interface rather than as a function that returns an SVG path data string; this allows curves to render to either SVG or Canvas. In addition, line.curve and area.curve now take a function which instantiates a curve for a given context, rather than a string.

If you want a linear interpolation, it's the default and you don't need to specify anything:

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

why interpolate is not a function in d3

1 Answers1