d3.svg.line()错误:未捕获行:无法读取未定义的属性‘TypeError’
我正在使用以下代码尝试使用d3.js绘制路径，我在web上尝试了各种相同的代码示例，但在所有地方都得到了相同的错误。
以下是JS：
<script type="text/javascript">
var svg;
//The data for our line
lineData = [ { "x": 1, "y": 5}, { "x": 20, "y": 20},
{ "x": 40, "y": 10}, { "x": 60, "y": 40},
{ "x": 80, "y": 5}, { "x": 100, "y": 60}];
//This is the accessor function we talked about above
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("linear");
//The SVG Container
var svgContainer = d3.select("body").append("svg:svg")
.attr("width", 200)
.attr("height", 200);
//The line SVG Path we draw
var lineGraph = svgContainer.append("path")
.attr("d", lineFunction(lineData))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none");
</script>错误是：未捕获行:无法读取未定义行的属性‘TypeError’
这行代码如下：var lineFunction = d3.svg.line()
我不确定“未定义”是什么意思。有什么线索吗？
回答 3
Stack Overflow用户
发布于 2016-06-04 05:23:03
阅读您的comment我猜您使用的是D3 v4。由于version 4没有d3.svg，因此出现错误消息。您要查找的线生成器现在已定义为d3.line()。
如果您仍在使用版本3，它将改为d3.svg.line()。
此外，正如其他回答者所指出的那样，这将导致后续错误，因为d3.line没有提供方法.interpolate()，因此语句的其余部分保持不变。D3 v4提供了用于此目的的，用于插值。这些工厂是使用line.curve()提供给行生成器的。D3 v3的.interpolate("linear")现在变成了.curve(d3.curveLinear)。但是，由于line.curve()缺省为d3.curveLinear，因此在本例中可以安全地省略这一点。
因此，该语句变为：
var lineFunction = d3.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.curve(d3.curveLinear); // Use for clarity, omit for brevity.Stack Overflow用户
发布于 2016-10-26 18:24:10
由于版本4中没有d3.svg，因此请确保您的代码已按以下语法进行了修改。
var lineFunction = d3.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; });Stack Overflow用户
发布于 2018-02-03 02:53:23
更新
此外，如果您使用的是D3js v4，则此语句.interpolate("linear");将出现问题，并显示以下警告：
d3.line(...).x(...).y(...).interpolate is not a function。
在此新版本中，.interpolate("linear");应更改为：
curve(d3.curveLinear);
就像curveLinear的描述一样。
https://stackoverflow.com/questions/37619798
复制相似问题
腾讯云开发者
