繪製與d3.js topojson文件（NYC自治市鎮和普查區）

這裏是如此的第一topojson問題。我在渲染地圖時遇到問題（紐約市自治市），但無法弄清原因。下面的代碼只是this example的一個副本，具有不同的topojson文件。我已經上傳文件here。以下是關於我如何創建文件的詳細信息。現在，我只是變得混亂的線條。可能原因是topojson文件，但我不知道什麼是錯的。繪製與d3.js topojson文件（NYC自治市鎮和普查區）

PS：我無法標記此爲topojson因爲標籤還沒有被之前

TopoJSON文件

1）下載shape文件使用從here

（在「鎮&社區區」的文件‘行政區’（左），ArcView的Shape文件）

2）簡化shape文件與QGIS

3）轉換爲TopoJSON與

ogr2ogr -f geoJSON nybb-geo.json nybb.shp 
topojson -o nybb.json nybb-geo.json

HTML/JS代碼

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

.boundary { 
    fill: none; 
    stroke: #000; 
    stroke-width: .5px; 
} 

</style> 
<body> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script src="http://d3js.org/topojson.v0.min.js"></script> 
<script> 

var width = 960, 
    height = 500; 

var path = d3.geo.path(); 

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

d3.json("/geo/nybb.json", function(error, topology) { 
    svg.append("path") 
     .datum(topojson.object(topology, topology.objects['nybb-geo'].geometries[0])) 
     .attr("d", path) 
     .attr("class", "boundary"); 
}); 

</script>

來源

2012-12-26 user2503795

只是一個猜測。嘗試重新投影shapefile到wgs84，然後重試。 – decio

亦如用戶10579的評論所說，我是能夠通過重新投影解決問題shapefile到NAD83（EPSG 4269）。創建從重新投影shape文件的topojson文件後，d3.js顯示了

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

我遇到的第二個問題是有關正確的中心，規模，和翻譯值地圖。有了上面的代碼，nyc只是一個有很多空白的小點。找到正確的中心，縮放和翻譯值可能有點乏味。最後，我添加了下面的代碼，它允許您拖放地圖並滾動以更改比例參數。每次更改後都會顯示值，以便將地圖放在正確的位置並從控制檯輸出中採用最後一個參數。

svg.call(d3.behavior.zoom() 
      .translate(projection.translate()) 
      .scale(projection.scale()) 
      .on("zoom", redraw)); 

    function redraw() { 
     if (d3.event) { 
     projection 
      .translate(d3.event.translate) 
      .scale(d3.event.scale); 
     } 
     map.datum(topojson.object(topology, topology.objects.nyct2010)) 
     .attr("d", path) 
     .attr("class", "boundary"); 
     console.log("Current scale:" + projection.scale()) 
     console.log("Current translate:" + projection.translate()) 
     console.log("Current rotate:" + projection.rotate()) 
    }

來源

2012-12-27 20:23:08 user2503795

地圖變量的定義是什麼？ –

你能提供一個JS小提琴的鏈接嗎？ – clhenrick

繪製與d3.js topojson文件（NYC自治市鎮和普查區）

回答

相關問題