1
Ich versuche, ein einfaches Beispiel zu folgen, um eine Choropleth Karte der Bevölkerungsdichte zu erstellen, wie diese Mike Bostock’s Block 6320825.D3 Rendering Karte nicht vollständig
Für diesen Zweck konvertierte ich eine relativ große (~ 35MB, German postal areas) geojson Datei zu topojson und fügte Bevölkerungsdaten hinzu. Im Code berechne ich die Populationsdichte im Flug und .map diese Daten an den Topojson als properties.
Problem ist, nicht die ganze Karte gemacht wird, gibt es immer wieder Teile davon fehlen. Rendering nur die Umrisse funktioniert.
<!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>
Vielleicht ist es ein Problem mit asynchroner Datenberechnung und Rendering, aber am console.log suchte, scheint Dichteberechnung fein zu gehen.
Jeder Rat wird sehr geschätzt!
aktualisieren
Können Sie uns Ihren topoJSON mit den Bevölkerungsdaten zeigen? Mindestens ein Bereich zu sehen, der funktioniert, genauso wie einer, der nicht funktioniert, wäre sehr hilfreich. Wenn möglich, richte ein [mcve] ein, mit dem du herumspielen kannst. – altocumulus
Ihr Datenausschnitt umfasst Dresden und Köln, die - mit Blick auf die Karte - scheinbar in den richtigen Bereichen liegen ... Was ist mit Hannover? – altocumulus
@altocumulus Leider wird Dresden nicht korrekt gerendert. Ich habe ein Arbeitsbeispiel hinzugefügt, das hilfreicher sein könnte. – DeEgge