d3.js地圖顯示爲空

這使我瘋狂，我不知道我的錯誤在哪裏，在json文件中（看起來不像），加載地圖的代碼，甚至應用的顏色。我已經與noob d3.js world example比較，這對我有用，我只是替換座標，json地圖文件和我的地區的標籤來顯示，voilá，不起作用，嘿嘿。d3.js地圖顯示爲空

這裏是我的HTML + JS：

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 
path { 
    stroke: green; 
    stroke-width: 0.25px; 
    fill: grey; 
} 
</style> 
<body> 
<!--<script src="http://d3js.org/d3.v3.min.js"></script>--> 
<!--<script src="http://d3js.org/topojson.v0.min.js"></script>--> 
<script type="text/javascript" src="js/d3.v3.js"></script> 
<script src="js/topojson.v0.min.js"></script> 
<script> 
var width = 960, 
    height = 500; 

var projection = d3.geo.mercator() 
     .center([-3.5,40.5]) 
     .scale(40000) 
// .scale(900) 
// .rotate([-180,0]); 

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

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

var g = svg.append("g"); 


//d3.json("maps/world-110m2.json", function(error, topology) { 
//d3.json("maps/prov_37.json", function(error, topology) { 
//d3.json("maps/prov_40.json", function(error, topology) { 
d3.json("maps/prov_28.json", function(error, topology) { 
    g.selectAll("path") 
//  .data(topojson.object(topology, topology.objects.countries) 
//  .data(topojson.object(topology, topology.objects.prov_40) 
//  .data(topojson.object(topology, topology.objects.prov_37) 
     .data(topojson.object(topology, topology.objects.prov_28) 
      .geometries) 
    .enter() 
     .append("path") 
     .attr("d", path) 
}); 

var zoom = d3.behavior.zoom() 
    .on("zoom",function() { 
     g.attr("transform","translate("+ 
      d3.event.translate.join(",")+")scale("+d3.event.scale+")"); 
     g.selectAll("path") 
      .attr("d", path.projection(projection)); 
}); 

svg.call(zoom) 
</script> 
</body> 
</html>

好，那我在代碼中已經盡了JSON文件，你可以從這裏下載它們（以及HTML文件）：test files

注意我的每個json地圖都有不同的ID或標籤供區域顯示，因此每次我在HTML代碼中切換json地圖時，都會切換到正確的ID /標籤。例如，對於地圖「prov_28_topo.json」 ID爲「prov_28」：

}, 
"objects": { 
    "prov_28": { 
     "type": "GeometryCollection", 
     "geometries": [{

來源

2013-06-25 miguelfg

我只能看着你的JSON文件中的一個，prov_28_topo.json，它是不是有效的JSON。

你有{"type":"Topology","transform":{"scale":[0.0007357596319631963,0.0004301291039103907],"translate":[-4.57907617,38.02244023]},"objects":{"prov_28:{"type"

它應該是：

{"type":"Topology","transform":{"scale":[0.0007357596319631963,0.0004301291039103907],"translate":[-4.57907617,38.02244023]},"objects":{"prov_28":{"type"

其報價_28後。改變這一切使一切工作。

來源

2013-06-25 18:46:45

你是對的，但是從那裏我發現了真正的問題，這就是我對文件和ID都使用相同的名稱，而文件實際上是不同的，它以'_topo'結尾。我一直在看它幾個小時，並且無法找到這樣的noob錯誤。謝謝！！ – miguelfg

d3.js地圖顯示爲空

回答

相關問題