Question

我试图通过一个简单的例子来创建一个人口密度的等值区域图，如Mike Bostock’s Block 6320825。

为此，我将一个相对较大的（~35MB，German postal areas）geojson文件转换为topojson并添加了人口数据。在代码中，我动态计算人口密度，并将此数据.map计算为topojson properties。

问题是，不是整个地图都被渲染，总有一些地方缺失。只渲染轮廓有效。

<!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

Answer 1

嗯，我修复了它，至少在大多数情况下。我只是通过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

D3渲染图不完全

1 个答案: