D3 JS - 未捕获的类型错误:无法读取未定义的属性“长度” - 似乎与数据问题有关

D3 JS - Uncaught TypeError: Cannot read property 'length' of undefined - seems related to data issue

本文关键字：长度 问题 数据 属性 读取 JS 类型 错误 D3 未定义      更新时间：2023-09-26

我看到列出了几个这种性质的问题。所以我有同样的问题：D3 - 未捕获的类型错误：无法读取未定义的属性"长度"。

这发生在第 42 行： d： lineFun（ds.monthlySales）

任何想法感激地收到，

谢谢，杰瑞

我的代码和 json 遵循：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>fm</title>
    <script src="d3.min.js"></script>
        <link rel="stylesheet" href="FMstyle.css" />
  </head>
  <body>

    <div class="pageHeading">Facilities Management</div><br />
  <script>
    var h=100;
    var w=400;
    var ds; // global dataset variable
    var salesTotal;
    var salesAvg;
    var metrics=[];
    //function showHeader() {
    //  d3.select("#tree-container").append("h1")
    //      .text(ds.cat)
    //}
    function buildLine() {
        var lineFun = d3.svg.line()
            .x(function (d) { return d.month; })
            .y(function (d) { return h-d.sales; })
            .interpolate("linear");
        var svg = d3.select("#tree-container").append("svg")
            .attr({ width: w, height: h });

        var viz = svg.append("path").attr({
                d: lineFun(ds.monthlySales),
                "stroke": "purple",
                "stroke-width": 2,
                "fill": "none"
            });
    }

    d3.json("sales.json", function(error, data) {
        if(error) {
            console.log(error);
        }   else {
            console.log("found some data");
            console.log(data);
            ds=data;
        }
        buildLine();
    });
  </script>
<div id="tree-container" 
    style="border: solid 1px blue; float: left;"></div>
<div style="border: solid 1px blue; width: 20%;
    float: left; margin-left: 5px;">
    <p>Properties</p>
    <p>Properties</p>
    <p>Properties</p>
</div>
  </body>
</html>

[{ "content": [
    {
        "category": "Furniture",
        "region": "West",
        "monthlySales":
            [{
                "month":1,
                "sales":38
            },
            {
                "month":2,
                "sales":40
            },
                        {
                "month":3,
                "sales":41
            },
            {
                "month":4,
                "sales":39
            },
            {
                "month":5,
                "sales":43
            },
            {
                "month":6,
                "sales":35
            }]
    }]
}
]

JSON 的结构与您尝试执行的操作不匹配。 lineFun期望一个数组，但没有得到一个。轻松修复！

而不是：

ds=data;

用：

ds=data[0].content[0].monthlySales;

这是一个工作问题：http://plnkr.co/edit/Q9lfkY2Vc6g0rYYIAUKm?p=preview

如果在浏览器中使用检查器，则可以看到生成的路径如下所示：

<path d="M1,62L2,60L3,59L4,61L5,57L6,65" stroke="purple" stroke-width="2" fill="none"></path>

但路途不长！

您可能希望使用 d3.scale.linear 来规范化数据：

https://github.com/mbostock/d3/wiki/Quantitative-Scales

相关文章：