Javascript d3.svg.line() 错误：未捕获的类型错误：无法读取未定义的属性“行”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37619798/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
d3.svg.line() error: Uncaught TypeError: Cannot read property 'line' of undefined
提问by Arihant
I am using the following code to try to draw a path using d3.js I have tried various code examples on the web about the same and have been getting the same error everywhere.
我正在使用以下代码尝试使用 d3.js 绘制路径我在网上尝试了各种代码示例，但到处都出现相同的错误。
Following is the JS:
以下是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>
The error is: Uncaught TypeError: Cannot read property 'line' of undefined
错误是：未捕获的类型错误：无法读取未定义的属性“行”
This comes at the following line: var lineFunction = d3.svg.line()
这是在以下行： var lineFunction = d3.svg.line()
I am not sure what 'undefined' means here. Any leads?
我不确定这里的“未定义”是什么意思。任何线索？
回答by altocumulus
Reading your commentI suppose you are using D3 v4. As of version 4there is no d3.svg, hence the error message. The line generator you are looking for is now defined as d3.line().
阅读您的评论我想您正在使用 D3 v4。从版本 4 开始，没有d3.svg，因此出现错误消息。您正在寻找的线生成器现在定义为d3.line().
If you were still using version 3, it would be d3.svg.line()instead.
如果您仍在使用第 3 版，则d3.svg.line()改为使用第 3 版。
Also, as other answerers have noted, this will lead to a follow-up error when leaving the rest of the statement untouched as d3.linedoes not feature a method .interpolate(). D3 v4 has curve factoriesfor this purpose, which are used for interpolation. These factories are supplied to the line generator using line.curve(). D3 v3's .interpolate("linear")now becomes .curve(d3.curveLinear). However, since line.curve()defaults to d3.curveLinearthis can safely be omitted in your case.
此外，正如其他回答者所指出的那样，当保持语句的其余部分不变时，这将导致后续错误，因为d3.line它没有方法.interpolate()。D3 v4 具有用于此目的的曲线工厂，用于插值。这些工厂使用line.curve(). D3 v3.interpolate("linear")现在变成.curve(d3.curveLinear). 但是，因为在您的情况下可以安全地省略line.curve()默认设置d3.curveLinear。
The statement thus becomes:
语句因此变为：
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.
回答by Arihant
Make sure your code has modified in the below syntax since there is no d3.svgin version 4.
确保您的代码已按以下语法修改，因为版本 4 中没有d3.svg。
var lineFunction = d3.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; });
回答by Huyen
[Update]
[更新]
Also, if you are using D3js v4, a problem with this statement .interpolate("linear");will occur with this warning:
此外，如果您使用的是 D3js v4，则此语句.interpolate("linear");会出现问题并显示以下警告：
d3.line(...).x(...).y(...).interpolate is not a function.
d3.line(...).x(...).y(...).interpolate is not a function.
In this new version, .interpolate("linear");should be changed to:
在这个新版本中，.interpolate("linear");应该改为：
curve(d3.curveLinear);
curve(d3.curveLinear);
As in the description of curveLinear.
正如在curveLinear的描述中一样。
