d3.svg.line() 错误:未捕获的类型错误:无法读取未定义的属性“行" [英] d3.svg.line() error: Uncaught TypeError: Cannot read property 'line' of undefined

问题描述

我正在使用以下代码尝试使用 d3.js 绘制路径我在网上尝试了各种相同的代码示例，但到处都出现相同的错误.

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.

以下是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>

错误是:Uncaught TypeError: Cannot read property 'line' of undefined

这在下面一行:var lineFunction = d3.svg.line()

我不确定这里的未定义"是什么意思.有线索吗?

I am not sure what 'undefined' means here. Any leads?

推荐答案

阅读你的 评论 我想你正在使用 D3 v4.从第4版开始，没有d3.svg，因此是错误消息.您正在寻找的线生成器现在定义为 d3.line().

Reading your comment I suppose you are using D3 v4. As of version 4 there is no d3.svg, hence the error message. The line generator you are looking for is now defined as d3.line().

如果您仍在使用第 3 版，则使用 d3.svg.line() 代替.

If you were still using version 3, it would be d3.svg.line() instead.

此外，正如其他回答者所指出的，当保持语句的其余部分不变时，这将导致后续错误，因为 d3.line 不具有方法 .interpolate().D3 v4 具有用于此目的的曲线工厂，用于用于插值.这些工厂使用 line.curve()一>.D3 v3 的 .interpolate("linear") 现在变成了 .curve(d3.curveLinear).但是，由于 line.curve() 默认为 d3.curveLinear，因此在您的情况下可以安全地省略.

Also, as other answerers have noted, this will lead to a follow-up error when leaving the rest of the statement untouched as d3.line does not feature a method .interpolate(). D3 v4 has curve factories for 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.curveLinear this can safely be omitted in your case.

语句变成:

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.

这篇关于d3.svg.line() 错误:未捕获的类型错误:无法读取未定义的属性“行"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！