未捕获的TypeError：无法读取未定义的属性“ length”

Question

我正在尝试从地图中获取一些数据，但是出现以下错误：

Uncaught TypeError：无法读取未定义的属性“ length”。

这是我的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <title>D3 Test</title>
    <script type="text/javascript" src="http://localhost/webserver/d3/d3.js"></script>
    <script type="text/javascript" src="http://localhost/webserver/topojson/topojson.js"></script>
        <style type="text/css">

            div.bar {
                display: inline-block;
                width: 20px;
                height: 75px;
                background-color: teal;
                margin-right: 2px;
            }
            .pumpkin {
                fill: rgba(128, 0, 128, 0.75);
                stroke: yellow;
                stroke-width: 5;
            }
            .apple {
                fill: rgba(0, 255, 0, 0.55);
                stroke: green;
                stroke-width: 15;
            }
            .orange {
                fill: rgba(255, 255, 0, 0.55);
                stroke: orange;
                stroke-width: 10;
            }
            .subunit    { fill: #cdc; }
            .subunit-label  {
                fill: #777;
                fill-opacity: .25;
                font-size:  30px;
                font-weight: 300;
                text-anchor: middle;}

            .provincie  {fill: none; }
            .Utrecht    {fill: #ddd; }
            .Zuid-Holland   {fill: #dde; }
            .Noord-Holland  {fill: #dee; }
            .Drenthe    {fill: #aae; }
            .Gelderland     {fill: #eee; }
            .Friesland  {fill: #ddc; }
            .Groningen  {fill: #dcc; }
            .Limburg    {fill: #ccc; }
            .Noord-Brabant  {fill: #ddb; }
            .Overijssel     {fill: #dbb; }
            .Zeeland    {fill: #bbb; }
        </style>    
    </head>
    <body>
    <script type="text/javascript">

    var width = 960, height = 860;

    var projection = d3.geo.albers()
        .center([6, 49.40])
        .rotate([0, -1.9])
        .parallels([50, 60])
        .scale(11000)
        .translate([width / 2, height / 2]);

    var path = d3.geo.path()
        .projection(projection);

    var svg = d3.select("body").append("svg")
        .attr("width", width) 
        .attr("height", height);

//Define quantize scale to sort data values into buckets of color
    var color = d3.scale.quantize()
                .range(["rgb(237,248,233)","rgb(186,228,179)","rgb(116,196,118)","rgb(49,163,84)","rgb(0,109,44)"]);

//Load in data
    d3.csv("http://localhost/webserver/data/beroepsbevolking.csv", function(data) {

          //Set input domain for color scale
            color.domain([
                    d3.min(data, function(d) { return d.value; }), 
                    d3.max(data, function(d) { return d.value; })
                ]);     

    d3.json("http://localhost/webserver/data/nl2.json", function(error, nl) {
        svg.selectAll(".subunit")
        .data(topojson.object(nl, nl.objects.subunits).geometries)
            .enter().append("path")
            .attr("class", function(d) { return "subunit " + d.id; })
        .attr("d", path);

        svg.selectAll(".subunit-label")
        .data(topojson.object(nl, nl.objects.subunits).geometries)

        //svg.selectAll(".provincie")
        .data(topojson.object(nl, nl.objects.provincies).geometries)
        .enter().append("path")
        //    .attr("class", function(d) { return "provincie " + d.properties.name; })
        .attr("d", path);

    //Merge the ag. data and GeoJSON
    //Loop through once for each ag. data value
      d3.json("http://localhost/webserver/data/nl2.json" ,function(json) {

                    for (var i = 0; i < data.length; i++) {

                        //Grab provincie name
                        var dataProvincie = data[i].provincie;

                        //Grab data value, and convert from string to float
                        var dataValue = parseFloat(data[i].value);

                        //Find the corresponding provincie inside the GeoJSON
                        for (var j = 0; j < json.features.length; j++) {

                            var jsonProvincie = json.features[j].properties.name;

                            if (dataProvincie == jsonProvincie) {

                                //Copy the data value into the JSON
                                json.features[j].properties.value = dataValue;

                                //Stop looking through the JSON
                                break;

                            }
                        }       
                    }

                    //Bind data and create one path per GeoJSON feature
                    svg.selectAll("path")
                       .data(json.features)
                       .enter()
                       .append("path")
                       .attr("d", path)
                       .style("fill", function(d) {
                            //Get data value
                            var value = d.properties.value;

                            if (value) {
                                //If value exists…
                                return color(value);
                            } else {
                                //If value is undefined…
                                return "#ccc";
                            }
                       });
            });
        }); 
      });
    </script>
    </body>
</html>   

在第115行出现错误：

for（var j = 0; j <json.features.length; j ++）{

为什么？

Answer 1

您的JSON没有features字段。 此外，您还错过了d3.json函数中的参数-在第二个调用中， json实际上将绑定到该错误。 更改

d3.json("http://localhost/webserver/data/nl2.json" ,function(json) {

至

d3.json("http://localhost/webserver/data/nl2.json" ,function(error, json) {

第二次调用d3.json似乎是不必要的-那时，您已经在nl变量中保存了nl2.json中的数据。

Answer 2

参数的名称是“ json”，而不是“ data”。 使它们具有相同的名称，它应该可以工作。

也; 从错误消息中获得提示； “数据”未定义。