d3.js choropleth map示例錯誤

我試圖學習使用d3.js提供的示例來構建choropleth地圖。d3.js choropleth map示例錯誤

當我從示例中的.tsv文件切換到我的版本中的.json文件時，我總是收到一個錯誤：「TypeError：congress.forEach不是函數」。下面是我使用的代碼：

<script type="text/javascript"> 
var width = 960, 
     height = 500; 

var path = d3.geo.path(); 

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

var g = svg.append("g") 
     .call(d3.behavior.zoom() 
     .scaleExtent([1, 10]) 
     .on("zoom", zoom)); 

d3.json("us-10m.json", function (error, us) { 
    d3.json("https://www.govtrack.us/api/v2/role?current=true", function (error,  congress) { 
     var memberId = {}; 

     congress.forEach(function (d) { //TypeError:congress.forEach is not a function 
      memberId[d.id] = +d.id; 
     }); 

     g.append("g") 
       .attr("class", "states") 
       .selectAll("path") 
       .data(topojson.feature(us, us.objects.states).features) 
       .enter().append("path") 
       .attr("d", path) 
       .style("fill", function (d) { 
        return color(memberId[d.id]); // <-C 
       }); 

     g.append("path") 
       .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })) 
       .attr("class", "states") 
       .attr("d", path); 
    }); 
}); 

function zoom() { 
    g.attr("transform", "translate(" 
      + d3.event.translate 
      + ")scale(" + d3.event.scale + ")"); 
}

任何幫助表示讚賞。抱歉，我沒有把這個放在jsfiddle上，但由於跨域問題，我無法連接到.us-10m.json。

謝謝湯姆

來源

2014-11-08 t6s

這是一個跨域問題的就像它在jsfiddle上一樣，這就是'congress'爲null的原因（因此'forEach'不存在）。您可以將文件複製到您的項目目錄中，以便所有內容都是本地主機。 – meetamit 2014-11-08 04:09:26

謝謝meetamit。我嘗試了您的建議，但我仍然收到相同的錯誤。 – t6s 2014-11-08 04:44:58

您是否已將'「https://www.govtrack.us/api/v2/role?current=true」'更改爲'「/path/to/local.json」'？當您查看開發工具 - >網絡面板時，您會看到什麼？ – meetamit 2014-11-08 05:28:20

congress不是一個數組 - 它是一個對象：

{ 
    meta: { 
    limit: 100, 
    offset: 0, 
    total_count: 540 
    }, 
    objects: [ {...}, {...}, {...}, {...} ] 
}

需要遍歷congress.objects：

congress.objects.forEach(function() {...})

來源

2014-11-08 06:50:13 meetamit

謝謝Amit！很好的觀察，錯誤消失了。 – t6s 2014-11-08 07:38:18

d3.js choropleth map示例錯誤

回答

相關問題