D3渲染地圖不完全

我試圖按照一個簡單的例子來創建一個人口密度的等值線圖，像這樣Mike Bostock’s Block 6320825。D3渲染地圖不完全

爲此，我將相對較大的（〜35MB，German postal areas）geojson文件轉換爲topojson並添加了人口數據。在代碼中，我將動態計算人口密度並將.map這一數據作爲properties作爲topojson。

問題是，不是整個地圖渲染，總會有遺漏的某些部分。渲染輪廓的作品。

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

/* CSS goes here. */ 
.plzRegions { 
    fill: none; 
} 

</style> 
<body> 
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> 
<script src="//d3js.org/topojson.v1.min.js"></script> 
<script> 

/* JavaScript goes here. */ 
var width = 960; 
    height = 1160; 

// color scale 
var color = d3.scale.log() 
    .range(["hsl(62,100%,90%)", "hsl(228,30%,20%)"]) 
    .interpolate(d3.interpolateHcl); 

// projection and re-aligning 
var projection = d3.geo.mercator() 
    .center([10, 51]) 
    .scale(1200 * 4) 
    .translate([width/2, height/2]); 

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

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

// load topojson 
d3.json("PLZ_GER_topo.json", function(error, ger){ 
    if (error) return console.error(error); 
    console.log(ger); 

    var plzRegions = topojson.feature(ger, ger.objects.PLZ_EWZ_Germany).features; 

// calculate population density and map to topojson 
    var densities = plzRegions 
     .map(function(d) { return d.properties.dichte = d.properties.ewz/(d3.geo.area(d)/12.56637 * 510072000); }) 
     .sort(function(a, b) { return a - b; }); 

    color.domain([d3.quantile(densities, .01), d3.quantile(densities, .99)]); 

    svg.append("g") 
     .attr("class", "plzRegions") 
     .selectAll("path") 
     .data(plzRegions) 
     .enter().append("path") 
     .style("fill", function(d) { return color(d.properties.dichte); }) 
     .attr("d", path); 
}); 

</script>

也許是異步數據計算和渲染問題，但看console.log，密度計算似乎去罰款。

任何意見是非常感謝！

更新

"Working" example

來源

2016-11-24 DeEgge

您能向我們展示您的topoJSON及其中的人口數據嗎？至少看到一個有效的區域和一個不起作用的區域將是非常有用的。如果可能的話，建立一個[mcve]來玩。 – altocumulus

您的數據片段包括德累斯頓和科隆，它們正在查看地圖 - 似乎在正確繪製的區域內......漢諾威呢？ – altocumulus

@altocumulus不幸的是，德累斯頓無法正確顯示。我添加了一個工作示例，可能會有更多幫助。 – DeEgge

好吧，我固定它，對於大部分至少。我只是通過Mapshaper運行該文件，根本沒有簡化。仍然有2-3個孔，但這可能是由於original file中的拓撲錯誤造成的。

npm install -g mapshaper 
mapshaper -i PLZ_regions_Germany.geojson -simplify visvalingam 1.0 -o format=topojson new_map.json

來源

2016-11-26 14:19:40 DeEgge

D3渲染地圖不完全

回答

相關問題