爲什麼內插不是d3中的函數

-1

我正在嘗試使用D3來製作line chart。這是我的代碼。我收到此錯誤：爲什麼內插不是d3中的函數

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>

來源

2017-04-01 user944513

interpolate在D3版本4（您正在使用的版本）已刪除。從變化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.

如果你想有一個線性插值，這是默認的，你不需要指定任何：

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

來源

2017-04-01 20:41:31 Mark

爲什麼內插不是d3中的函數

回答

相關問題