Javascript D3 JS-未捕获类型错误：无法读取未定义的属性“length”-似乎与数据问题有关_Javascript_D3.js_Charts_Line

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

javascript d3.js charts

Javascript D3 JS-未捕获类型错误：无法读取未定义的属性“length”-似乎与数据问题有关,javascript,d3.js,charts,line,Javascript,D3.js,Charts,Line,我看到有几个问题是这种性质的。所以我有同样的问题： D3-未捕获的TypeError:无法读取未定义的属性“length” 这发生在第42行： d:lineFunds.monthlySales 收到的任何想法谢谢，杰瑞我的代码和json如下： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>fm</tit

我看到有几个问题是这种性质的。所以我有同样的问题： D3-未捕获的TypeError:无法读取未定义的属性“length”

这发生在第42行： d:lineFunds.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;

使用：

这是一个有效的例子：

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

但是这条路真的很短

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

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