D3 渲染图不完整答案

【问题标题】：D3 rendering map not completelyD3 渲染图不完整
【发布时间】：2016-11-24 13:13:17
【问题描述】：

我正在尝试按照一个简单的示例来创建人口密度的等值线图，例如 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

【问题讨论】：

你能给我们看看你的topoJSON和人口数据吗？至少看到一个有效的区域和一个无效的区域会很有帮助。如果可能的话，设置一个minimal reproducible example 来玩玩。
您的数据 sn-p 包括德累斯顿和科隆，从地图上看，它们似乎在正确绘制的区域内......汉诺威呢？
@altocumulus 遗憾的是，德累斯顿的渲染不正确。我添加了一个工作示例，这可能会有所帮助。

标签： javascript d3.js topojson

【解决方案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

【讨论】：