D3渲染图不完全

Question

我正在尝试按照一个简单的示例来创建人口密度的等值线图，例如 Mike Bostock’s Block 6320825。

为此，我将一个相对较大的 (~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

Answer 1

好吧，我修复了它，至少大部分是这样。我只是运行通过 Mapshaper, no simplification at all. There are still 2-3 holes, but that's probably due to topology errors in the original file.

的文件

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

D3渲染图不完全

D3 rendering map not completely

javascript

d3.js

topojson