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
,密度计算似乎去罚款。
任何意见是非常感谢!
更新
答
好吧,我固定它,对于大部分至少。我只是通过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
您能向我们展示您的topoJSON及其中的人口数据吗?至少看到一个有效的区域和一个不起作用的区域将是非常有用的。如果可能的话,建立一个[mcve]来玩。 – altocumulus
您的数据片段包括德累斯顿和科隆,它们正在查看地图 - 似乎在正确绘制的区域内......汉诺威呢? – altocumulus
@altocumulus不幸的是,德累斯顿无法正确显示。我添加了一个工作示例,可能会有更多帮助。 – DeEgge