無法顯示帶有JSON文件的地圖d3.js

我有以下代碼，我正在嘗試製作除南極洲之外的世界地圖。無法顯示帶有JSON文件的地圖d3.js

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <style> 

    body { 
     background-color: white; 
    } 
    svg { 
     background-color: white; 
    } 

    </style> 

</head> 

<body> 
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> 
    <script src="//d3js.org/topojson.v1.min.js"></script> 
    <script> 
    var width = 960, 
     height = 1160; 

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

    d3.json("countries.json", function(error, world) { 
     if (error) return console.error(error); 
     console.log(world); 
}); 

     svg.append("path") 
      .datum(topojson.feature(world, world.objects.subunits)) 
      .attr("d", d3.geo.path().projection(d3.geo.mercator())); 
    }); 
    </script> 
</body> 
</html>

當我嘗試打開HTML頁面沒有出現，而它給人的錯誤是：https://bost.ocks.org/mike/map/：

Failed to load resource: net::ERR_FILE_NOT_FOUND

我從邁克·博斯托克的教程，可以在這裏找到以下。我已經嘗試了許多命令，並試圖使用它的通訊路徑來訪問文件。這些都是我試過（使用它們的記者本地主機連接）的命令：

python -m SimpleHTTPServer 
python3 -m http.server 
npm install -g http-server 
http-server -c-1

如果有人能告訴我什麼，我做錯了，那就太棒了！我檢查了我的代碼一千次，我真的不知道我做錯了什麼。在此先感謝！

我試圖在Firefox中打開文件，現在它給人的錯誤是：

TypeError: world.objects is undefined

來源

2016-06-13 Andrea

'countries.json'與index.html位於同一個目錄嗎？ – MrWillihog

是的，該文件是在同一個目錄！ – Andrea

'svg.append'塊必須位於'd3.json'函數內。 –

首先是：當你製作地圖時必須定義：地圖的中心，比例和投影。（這是字地圖不需要中心）

第二個：你的數據是一個geojson，你用它作爲.topojson。永諾嘗試使用.topojson：

原始文件（以GeoJSON）：561 KB
轉換的文件（topoJSON）：75 KB

在這裏你可以找到你的地圖轉換：

TopoJSON Word Map

而且這裏的完整代碼：

<head> 
    <meta charset="utf-8"> 
    <style> 
    body { 
     background-color: white; 
    } 
    svg { 
     background-color: white; 
    } 
    .county { 
     fill:#696; 
     stroke:#666; 
     stroke-width:1px; 
    } 
    </style> 
</head> 
<body> 
    <!-- D3 Base --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script> 
    <!-- TopoJSON Library --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script> 
    <script> 
    var width = 960, 
     height = 1160; 

    var scal = (1 << 10)/2/Math.PI;  //<-- Scale 
    var projection = d3.geo.mercator().scale(scal).translate([width/2, height/2]);   //<-- Projection 
    var center = projection(cent); 
    var path = d3.geo.path().projection(projection); 

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

    d3.json("word.topojson", function(error, world) { 
     if (error) return console.error(error); 

     var countries = topojson.feature(world, world.objects.collection); 
     svg.selectAll("path") 
      .data(countries.features) 
     .enter() 
      .append("path") 
      .attr("class", "county")  //<-- Class to style your countries 
      .attr("d", path); 
    }); 
    </script> 
</body> 
</html>

那會給你這樣的事情：

建議

植酮SimpleHTTPServer，做工精良但最好去的東西更紮實。如果您在Windows或XAMPP上安裝WAMP，如果您在Linux上
嘗試不同的瀏覽器，我發現Firefox和SVG和Maths有一些錯誤。整體投影數學和表示.-

來源

2016-06-13 17:38:46 Klaujesi

好吧，感謝您的幫助！我要試試這個！ :) – Andrea

「var scal =（1 << 10）/ 2/Math.PI;」是做什麼的？我正在嘗試在經度和緯度之間投影一些線條，但所有線條項目均在svg對象中進行了鏡像...您是否知道爲什麼發生這種情況？ – Andrea

縮放地圖，將'10'改爲'12'或'20'並檢查您的地圖。你會注意到它的工作原理;） – Klaujesi

@Gerardo朵是正確的。您需要將svg包裝在d3.json調用中。這使用uk.json例如：

d3.json("https://bost.ocks.org/mike/map/uk.json", function(error, world) { 
    if (error) return console.error(error); 
    console.log(world); 

    svg.append("path") 
    .datum(topojson.feature(world, world.objects.subunits)) 
    .attr("d", d3.geo.path().projection(d3.geo.mercator())); 
    });

當我插入到您的代碼，我可以看到一個英國的小地圖。

來源

2016-06-13 14:04:42 smoore4

。他與：countries.json合作。我們必須看到內容。也許他沒有使用：world.objects.subunits – Klaujesi

我認爲@Klaujesi是正確的，因爲我試圖用這個代碼來實現它，它也沒有工作... – Andrea

無法顯示帶有JSON文件的地圖d3.js

回答

相關問題