나는 중국의지도를 d3js로 그릴 수 있지만 choropleth는 채울 수 없습니다. 코드 : 당신이 볼 수 있듯이, 내가 console.log(rateById);
을 포함했다d3js choropleth는 채우지 않을 것입니다
<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>
, 반환
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}
의 핵심은 지방의 ID를 의미합니다. 여기에 china_simplify.json
파일의 조각은 다음과 같습니다 있는지 이유를 제대로 충전되지 않음
{"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], [...]
! return color(rateById[d.id]);
을 제거하고 red
으로 교체하면 모든 것이 빨간색으로 채워집니다. 이 문제는 color
기능과 관련이 있음을 나타냅니다.
나는 그것이 #bfd2e5
을 반환 console.log(color(rateById[1]));
을 실행 EDIT. 이것은 color
함수 자체에는 아무런 문제가 없다는 것을 암시하지만, 어떤 이유로 16 진수 코드가 맵에 채워지지 않습니다.
아마도 여기에 뭔가 잘못된 것이 있습니다 : .style("fill", function(d) { return color(rateById[d.id]); })
. this example과 일치하기 때문에 알아낼 수 없습니다. 내가 함께 jsfiddle 넣어 한 2
편집 : rateById에서 https://jsfiddle.net/o06edvuf/
고마워요. 흥미롭게도 왜 '재산'이 필요한가요? –
인쇄 d, 알 수 있습니다. –