topojson.js：187：Uncaught TypeError：無法讀取未定義的屬性'type'

我試圖爲包括省在內的荷蘭的D3和TopoJSON製作地圖。這是代碼：topojson.js：187：Uncaught TypeError：無法讀取未定義的屬性'type'

<!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); 

    d3.json("http://localhost/webserver/data/nl.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) 
     .enter().append("text") 
     .attr("x", -20) 
     .attr("y", -50) 
     .attr("class", function(d) { return "subunit-label " + d.id; }) 
     .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; }) 
     .attr("dy", ".35em") 
     .text(function(d) { return d.properties.name; }); 

     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); 

     svg.append("path") 
     .datum(topojson.object(nl, nl.objects.places)) 
     .attr("d", path) 
      .attr("class", "place"); 

     svg.selectAll(".place-label") 
     .data(topojson.object(nl, nl.objects.places).geometries) 
     .enter().append("text") 
     .attr("class", "place-label") 
     .attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")"; }) 
     .attr("dy", ".35em").text(function(d) { return d.properties.name; }); 

     svg.selectAll(".place-label") 
     .attr("x", function(d) { return d.coordinates[0] > -1 ? 10 : -10; }) 
      .style("text-anchor", function(d) { return d.coordinates[0] > -1 ? "start" : "end"; }); 
     }); 
    </script> 
    </body> 
</html>

結果是荷蘭的地圖，但它不包含省（顏色和邊框）。

我得到以下錯誤：

遺漏的類型錯誤：無法讀取未定義topojson.js的特性 '類型'：187

這是行186和187：

函數幾何（O） {

var t = o.type，g = t ===「GeometryCollection」？ {type：t，geometries：o.geometries.map（geometry）}

來源

2013-03-19 csnake

看起來您正在引用拓撲中不存在的對象。

是否有可能您的TopoJSON文件使用「省」的英文拼寫而不是荷蘭文「provincies」？如果確實如此，那麼nl.objects.provincies將爲空，並且您需要在代碼中引用nl.objects.provinces，或編輯TopoJSON文件以使用荷蘭語拼寫「provincies」代替。

你可以發佈nl.json的內容，所以我們可以看看（比如，在Dropbox上）？

來源

2013-03-20 00:49:54 mbostock

感謝您的答案mbostock。我剛剛發現nl.json文件存在問題，並解決了問題。 – csnake 2013-03-20 18:41:48

topojson.js：187：Uncaught TypeError：無法讀取未定義的屬性'type'

回答

相關問題