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>

错误是：未捕获的TypeError：无法读取属性＆＃39; line＆＃39;未定义的

出现在以下行：var lineFunction = d3.svg.line()

我不确定＆＃39; undefined＆＃39;在这里意味着任何线索？

Answer 1

阅读comment我想你正在使用D3 v4 。截至version 4，没有d3.svg，因此出现错误消息。您正在寻找的线生成器现在定义为d3.line()。

如果您仍在使用版本3，则会改为d3.svg.line()。

此外，正如其他回答者所指出的那样，由于d3.line没有使用方法.interpolate()，因此在保留语句的其余部分时会导致后续错误。 D3 v4为此目的具有curve factories，用于插值。这些工厂使用line.curve()提供给生产线。 D3 v3＆＃39; .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; });

Answer 3

[更新]

此外，如果您使用的是D3js v4，则此警告会出现此语句.interpolate("linear");的问题：

d3.line(...).x(...).y(...).interpolate is not a function。

在这个新版本中，.interpolate("linear");应更改为：

curve(d3.curveLinear);

如curveLinear的描述。

d3.svg.line（）错误：未捕获TypeError：无法读取属性＆＃39; line＆＃39;未定义的

3 个答案: