d3.svg.line() 错误：未捕获类型错误：无法读取未定义的属性“行”

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: Cannot read property ‘line’ of undefined

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

我不确定这里的“未定义”是什么意思。有线索吗？

原文由 Arihant 发布，翻译遵循 CC BY-SA 4.0 许可协议

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.

原文由 altocumulus 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

确保您的代码已修改为以下语法，因为版本 4 中没有 d3.svg 。

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

原文由 user6869331 发布，翻译遵循 CC BY-SA 3.0 许可协议