Javascript D3渲染贴图不完全_Javascript_D3.js_Topojson

Javascript D3渲染贴图不完全

javascript d3.js

Javascript D3渲染贴图不完全,javascript,d3.js,topojson,Javascript,D3.js,Topojson,我试着按照一个简单的例子来创建一张人口密度的choropleth地图，就像这样为此，我将一个相对较大的（~35MB，）geojson文件转换为topojson，并添加了人口数据。在代码中，我动态计算人口密度，并将该数据映射到topojson作为属性问题是，并不是整个地图都被渲染了，总有部分地图丢失了。只渲染轮廓就可以了 <!DOCTYPE html> <meta charset="utf-8"> <style> /* CSS goes here. */

我试着按照一个简单的例子来创建一张人口密度的choropleth地图，就像这样

为此，我将一个相对较大的（~35MB，）

geojson

文件转换为

topojson

，并添加了人口数据。在代码中，我动态计算人口密度，并将该数据映射到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>


/*CSS在这里*/
.普氏区{
填充：无；
}
/*JavaScript就在这里*/
var宽度=960；
高度=1160；
//色标
var color=d3.scale.log（）
.范围（[“hsl（62100%，90%），“hsl（228,30%，20%）”）
.插值（d3.插值EHCL）；
//投影和重新对齐
var projection=d3.geo.mercator（）
.center（[10,51]）
.比例（1200*4）
.翻译（[宽度/2，高度/2]）；
var path=d3.geo.path（）
.投影（投影）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
//加载拓扑JSON
d3.json（“PLZ_GER_topo.json”），函数（error，GER）{
if（error）返回控制台。error（error）；
控制台日志（ger）；
var plzRegions=topojson.feature（ger，ger.objects.PLZ_EWZ_Germany）.features；
//计算人口密度并映射到地形图
var密度=plzRegions
.map（函数（d）{返回d.properties.dichte=d.properties.ewz/（d3.geo.area（d）/12.56637*510072000）；}）
.sort（函数（a，b）{返回a-b；}）；
色域（[d3.分位数（密度，.01），d3.分位数（密度，.99）]；
svg.append（“g”）
.attr（“类”、“plzRegions”）
.selectAll（“路径”）
.数据（plzRegions）
.enter（）.append（“路径”）
.style（“fill”，函数（d）{返回颜色（d.properties.dichte）；}）
.attr（“d”，路径）；
});

可能是异步数据计算和渲染有问题，但查看

控制台.log

，密度计算似乎很顺利

任何建议都将不胜感激

更新

好吧，至少大部分时间我都修好了。我只是浏览了一下文件，一点也不简化。仍然有2-3个洞，但这可能是由于中的拓扑错误造成的

您能给我们看一下您的带有人口数据的topoJSON吗？至少看到一个可行的领域和一个不可行的领域会很有帮助。如果可能的话，设置一个游戏。你的数据片段包括德累斯顿和克伦，它们在地图上看起来似乎在正确绘制的区域内。。。“汉诺威怎么样？”高科穆卢斯遗憾地说，德累斯顿没有被正确渲染。我添加了一个工作示例，这可能会更有帮助。

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