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

Question

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

这发生在第 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
            }]
    }]
}
]

Answer 1

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

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

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

javascript

charts

line

d3.js