https://www.dropbox.com/s/znno4krx64zs3hm/Screenshot%202014-12-04%2015.11.10.png?dl=0
ここでコロプレス d3 コードの適応を開始しました。コロプレスをページに挿入するコードは次のとおりです。
//initialize the map's dimensions
var width = 960;
var height = 500;
//define the display threshold
var color = d3.scale.threshold()
.domain([.02, .04, .06, .08, .10])
.range(["#f2f0f7", "#dadaeb", "#bcbddc", "#9e9ac8", "#756bb1", "#54278f"]);
var path = d3.geo.path();
//add the map image to the div
var svg = d3.select("#" + rowID + " .choropleth").append("svg")
.attr("width", width)
.attr("height", height);
//import data from REST interface
$.ajax({
url: "<?php echo REST_URL; ?>",
data: {"method": "getChoroplethData", "reportID": reportID, "mode": mode, "contents": JSON.stringify(window.reportData[reportID]['contents'])},
success: function(response){
response = parseJSON(response);
var us = response['us'];
var data = response['data'];
var reportID = response['reportID'];
var rateById = {};
for(var i in data){
rateById[data[i]['id']] = +data[i]['rate'];
}
svg.append("g")
.attr("class", "counties")
.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.enter().append("path")
.attr("d", path)
.style("fill", function(d) { return color(rateById[d.id]); });
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a.id !== b.id; }))
.attr("class", "states")
.attr("d", path);
//show the report
$("#" + rowID + " .panel-body").slideDown();
}
});
ほとんどの場合、これでうまくいきます。AJAX 呼び出しからの応答には 3 つの部分があります。us
は、us.json
上記のコロプレスの例で使用されるデータであり、形式 の JSON データに変換されdata
た からのデータが含まれています。それはページの右側に配置されており、コロプレスが描かれたときはこのように見えることを除いて、すべてのピースは正しく動いています。これらの巨大な黒い斑点がマップ全体にある理由は考えられませんが、一部のコードがどのように機能するかは特に理解していません。ほとんどの場合、データがマップの色付けに使用される最後の部分です. コロプレス マップにこの種の影響を与える原因を知っている人はいますか?unemployment.tsv
[{'id':'some id','rate':'some rate},...{'id':'some id','rate':'some rate'}]