使用topojson和d3js在澳大利亞地圖上顯示城市

我試圖製作完全像這個示例（http://bost.ocks.org/mike/map/）的地圖，但重點關注澳大利亞和新西蘭。我按照說明操作，但地點上的點不會在我的地圖上呈現。使用topojson和d3js在澳大利亞地圖上顯示城市

這是我如何生成我的數據：

ogr2ogr -f GeoJSON -where "adm0_a3 IN ('AUS', 'NZL')" subunits.json ne_10m_admin_0_map_subunits.shp 

ogr2ogr -f GeoJSON -where "(iso_a2 = 'AU' OR iso_a2 = 'NZ') AND SCALERANK < 8" places.json ne_10m_populated_places.shp 

topojson --id-property su_a3 -p name=NAME -p name -o aus.json subunits.json places.json

這是到目前爲止，我已經得到了代碼：http://bashsolutions.com.au/australia.html

的地圖上顯示了但是對於城市中的點不顯示。我究竟做錯了什麼？

編輯：所以這不只是與大長誤差所以在這裏非常明確的是實際的代碼：

<script> 

var width = 960, 
    height = 1160; 


//var subunits = topojson.object(aus, aus.objects.subunitsAUS); 

var projection = d3.geo.mercator() 
    //.center([0,0]) 
    .center([180,-40]) 
    .scale(400) 
    //.translate([width/2, height/2]) 
    .precision(.1); 

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

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

d3.json("aus.json", function(error, aus) { 
    svg.selectAll(".subunit") 
    .data(topojson.object(aus, aus.objects.subunits).geometries) 
    .enter().append("path") 
    .attr("class", function(d) { return "subunit " + d.id; }) 
    .attr("d", path); 

    svg.append("path") 
    .datum(topojson.mesh(aus, aus.objects.subunits, function(a,b) { return a !== b; })) 
    .attr("d", path) 
    .attr("class", "subunit-boundary"); 

    svg.append("path") 
    .datum(topojson.mesh(aus, aus.objects.subunits, function(a,b) { return a == b; })) 
    .attr("d", path) 
    .attr("class", "subunit-boundary External"); 

/* This is the failing bit */ 
    svg.append("path") 
     .datum(topojson.object(aus, aus.objects.places)) 
     .attr("class", "place") 
     .attr("d", path); 
/* End of failing bit */ 

/* 
    svg.selectAll(".place-label") 
     .data(topojson.object(aus, aus.objects.places).geometries) 
    .enter().append("text") 
     .attr("class", "place-label") 
     .attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")"; }) 
     .attr("x", function(d) { return d.coordinates[0] > -1 ? 6 : -6; }) 
     .attr("dy", ".35em") 
     .style("text-anchor", function(d) { return d.coordinates[0] > -1 ? "start" : "end"; }) 
     .text(function(d) { return d.properties.name; }); 
*/ 

});

來源

2013-03-28 Ashy

我發現遠解決此問題，解決問題，但它仍然沒有解釋爲什麼它首先是失敗的。

這裏是修復：http://bashsolutions.com.au/australia2.html

此代碼塊替換故障位以上：

svg.selectAll(".place") 
    .data(topojson.object(aus, aus.objects.places).geometries) 
.enter().append("circle") 
    .attr("d", path) 
    .attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")"; }) 
    .attr("r", 2) 
    .attr("class", "place");

所以這個做類似的標籤位的東西（這是上面的註釋了圍繞它得到），但畫了一個圓圈而不是文字。

但是我還是不確定上面這一點有什麼問題，因爲它和Mike Bostock的例子（除了數據）是一樣的。

來源

2013-03-28 08:27:52 Ashy

難道是因爲你沒有聲明'places = topojson.object（aus，aus.objects.places）;'和'var subunits = topojson.object（aus，aus.objects.subunitsAUS）'腳本中的位置與Mike的示例中的位置相同？（我不確定，但它看起來是最好的可能性） – d3noob 2013-03-28 08:48:53

當您繪製輪廓時，您需要刪除TKL（托克勞）數據點。

svg.append("path") 
     .datum(topojson.mesh(aus, aus.objects.subunits, function(a, b) { 
      return a === b && a.id !=="TKL" })) 
     .attr("d", path) 
     .attr("class", "subunit-boundary External");

我仍然在研究爲什麼會產生錯誤，但將該條件添加到網格函數過濾器似乎可以解決問題。

來源

2013-03-28 09:12:41 minikomi

這似乎確實起作用。奇怪的是，TKL數據點會導致這一點。我注意到在呈現的svg中，「子單元TKL」路徑缺少d屬性。 '' – Ashy 2013-03-28 23:13:40

使用topojson和d3js在澳大利亞地圖上顯示城市

回答

相關問題