d3.svg.line()错误:未捕获的TypeError:无法读取未定义的属性"行"

Question

我使用以下代码尝试使用d3.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>

错误是:Uncaught TypeError:无法读取未定义的属性"line"

这来自以下行: var lineFunction = d3.svg.line()

我不确定'undefined'在这里意味着什么.任何线索？

Answer 1

阅读你的评论我想你正在使用D3 v4.从版本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.

Answer 2

由于版本4中没有d3.svg,请确保您的代码已在以下语法中进行了修改.

var lineFunction = d3.line()
                     .x(function(d) { return d.x; })
                     .y(function(d) { return d.y; });