d3js choropleth wird nicht gefüllt

Question

Ich bin in der Lage, eine Karte von China mit d3js zu zeichnen, aber die Choropleth wird nicht füllen. Der Code:

<script> 
var margin = {top: 0, right: 0, bottom: 0, left: 0}, 
    width = parseInt(d3.select('#map').style('width')), 
    height = width*0.7; 

var places = <?php echo json_encode($provinces); ?> 

var minimum = d3.min(places, function(d) { return d.rate; }), 
    maximum = d3.max(places, function(d) { return d.rate; }); 

var minimumColor = "#BFD3E6", 
    maximumColor = "#88419D"; 

var color = d3.scale 
    .linear() 
    .domain([minimum, maximum]) 
    .range([minimumColor, maximumColor]); 

var projection = d3.geo.mercator() 
    .center([109, 31]) 
    .scale(width*0.85) 
    .translate([width/1.8, height/1.5]) 

var path = d3.geo.path() 
    .projection(projection); 

var svg = d3.select("#map") 
    .append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate(0,0)"); 

d3.json("data/china_simplify.json", function(error, root) { 

    if (error) 
    return console.error(error); 
    console.log(root.features); 

    var rateById = {}; 
    places.forEach(function(d) { rateById[d.id] = +d.rate; }); 

    console.log(rateById); 

    svg.append("g") 
     .attr("class", "provinces") 
    svg.selectAll("path") 
     .data(root.features) 
     .enter() 
     .append("path") 
     .attr("d", path) 
     .style("fill", function(d) { return color(rateById[d.id]); }); 

}); 
</script> 

Wie Sie sehen können, habe ich console.log(rateById); aufgenommen haben, die zurückgibt:

Object {1: 5829, 2: 2181, 3: 33904, 4: 14182, 5: 23290, 6: 135365, 7: 56757, 8: 21148, 9: 463618, 10: 1895, 11: 8408, 12: 12318, 13: 2990, 14: 25601, 15: 12720, 16: 41816, 17: 27993, 18: 47288, 19: 15422, 20: 24968, 21: 34515, 22: 36199, 23: 44708, 24: 20886, 25: 16609, 26: 70220, 27: 117876, 28: 84413, 29: 14271, 30: 23102, 31: 19010, 32: 16097, 33: 3783, 34: 7616} 

Der Schlüssel bezieht sich auf die ID der Provinz. Hier ist ein Ausschnitt der china_simplify.json Datei:

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"id":1,"name":"甘肃"},"geometry":{"type":"Polygon","coordinates":[[[104.35851932200904,37.4],[104.46450768428224,37.440247301072134],[104.68950687084538,37.41192861571304],[104.76474775590418,37.25049144112714],[104.92241255059872,37.096754055055584],[105.18017459508144,36.97213633912071], [...] 

nicht sicher, warum es nicht richtig füllt! Wenn ich die return color(rateById[d.id]); entferne und durch red ersetze, dann ist alles rot gefüllt. Dies deutet darauf hin, dass das Problem mit der Funktion zusammenhängt.

EDIT

Als ich console.log(color(rateById[1])); führen Sie es #bfd2e5 zurückgibt. Dies deutet darauf hin, dass mit der color Funktion selbst nichts falsch ist, aber aus irgendeinem Grund werden die Hex-Codes nicht in die Karte gefüllt.

Hier stimmt wahrscheinlich etwas nicht: .style("fill", function(d) { return color(rateById[d.id]); }). Ich kann es nicht herausfinden, weil es this example entspricht.

EDIT 2

ich zusammen eine jsfiddle gesetzt haben: https://jsfiddle.net/o06edvuf/

Answer 1

ok, ich habe es gefunden.

.style("fill", function(d) { 
     return color(rateById[d.properties.id]); }) 

Answer 2

In rateById werden Raten über id aggregiert, aber die Domain gesetzt min und max Rate unter Berücksichtigung. Stellen Sie die Domäne für die Farbe mit rateById ein:

var minimum = d3.min(d3.values(rateById)), 
maximum = d3.max(d3.values(rateById));