2013-03-20 85 views
0

我試圖讓我在地圖上的一些數據屬性「長度」,但是,我有以下錯誤:遺漏的類型錯誤:無法讀取的不確定

遺漏的類型錯誤:無法讀取的未定義的屬性「長度」。

這是我的代碼:

<!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:

爲(VAR J = 0;Ĵ< json.features.length; J ++){

爲什麼?

+0

調試腳本。現代網頁瀏覽器有開發工具(Chrome atleast有一個集成的)。 – 2013-03-20 19:06:31

+0

錯誤消息告訴你對象'json'沒有'features'成員。在沒有向我們顯示您的數據的情況下,不可能知道發生了什麼。 – 2013-03-20 19:09:28

+0

https://www.dropbox.com/s/sq7v5dddeuk13tc/beroepsbevolking.csv是數據文件 – csnake 2013-03-20 19:18:55

回答

-1

參數的名稱是「json」,而不是「data」。 使他們同名,它應該工作。

另外;從錯誤消息中獲得提示; 「數據」未定義。

+0

我將json轉換爲數據,但現在在第1688行得到消息: var i,n = group.length,m = groupData.length,n0 = Math.min(n,m),updateNodes = new Array(m),enterNodes = new Array (m),exitNodes = new Array(n),node,nodeData; – csnake 2013-03-20 20:23:05

4

您的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第二次調用似乎沒有必要 - 在這一點上,你必須在nl2.json已經在nl變量中的數據。

+0

感謝大家的幫助。我是D3的新手,我想我想太快。我將首先回到基礎知識。 – csnake 2013-03-20 20:39:04

相關問題