D3地圖未顯示在本地服務器上的瀏覽器中

Question

我正在制作一張顯示中國各省的D3地圖。 我嘗試了幾種不同教程的混合使用，但是在將地圖顯示在使用python本地服務器的瀏覽器中時，我一直沒有成功。

我可以看到地圖信息已正確輸入到g元素中，並且GeoJSON文件確實包含32個省。 那我一定在做些錯誤的顯示嗎？

請參閱此處獲取我的代碼： https : //github.com/claiye/map/blob/master/index.html這很雜亂，因為我嘗試了幾種不同的教程，這些教程都無法滿足我的目標。

請指出我必須犯的愚蠢錯誤。 非常感謝您的幫助。 提前致謝！ :)

Answer 1

問題是創建的路徑不在svg和g標記內。 請檢查我的兩個評論。 我已驗證以下代碼是否有效。

<!DOCTYPE html>
<meta charset="utf-8">
<title>Map Testing</title>
<style>
    .province{
        fill:#ccc;
    }
</style>
<body>
<script type="text/javascript" src="d3/d3.v3.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script type="text/javascript">

    var width = 960; 
        height = 500;

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

    // Removed the slash before provinces.geojson
    d3.json("provinces.geojson", function(error, provinces) {
        if (error) return console.error(error);

        svg.append("g")
            .selectAll("path")
            .data(provinces.features)
            .enter()
            .append("path")
            .attr("class","province")
            .attr("d", d3.geo.path().projection(d3.geo.mercator().center([0,5]).scale(200).rotate([-180,0]))); // Added center and rotate here
});
</script>
</body>
<html

D3地圖未顯示在本地服務器上的瀏覽器中

問題描述

1 個解決方案

解決方案1
0 已采納 2015-08-03 06:15:14

D3地圖未顯示在本地服務器上的瀏覽器中

問題描述

1 個解決方案

解決方案1 0 已采納 2015-08-03 06:15:14

解決方案1
0 已采納 2015-08-03 06:15:14