我开始使用dc.js库创建各种图形,当我尝试使用dc.js创建Geo Choropleth地图并且无法添加缩放和移动地图的能力时,我遇到了问题.
我看到的所有例子都是使用d3和svg ..但是一旦我使用了这些例子,我就无法使用dc.dimention的数据和所有的crossfilter计算.
例如我的代码是:
d3.json("world-countries.json", function (statesJson) { geoChart.width(1000) .height(600) .dimension(countryDim) .projection(d3.geo.mercator() .scale((960 + 1) / 4 ) .translate([960 / 4, 960 / 4]) .precision(.1)) .group(countryGroup) .colors(d3.scale.quantize().range(["#E2F2FF","#C4E4FF","#9ED2FF","#81C5FF","#6BBAFF","#51AEFF","#36A2FF","#1E96FF","#0089FF","#0061B5"])) .colorDomain([0, 200]) .colorCalculator(function(d){ returnd ?geoChart.colors()(d) :'#ccc'; }) .overlayGeoJson(statesJson.features,"state",function(d){ return d.properties.name; }) .title(function (d) { return "State: " + d.key + (d.value ? d.value : 0) + "Impressions"; });
哪个效果很好,但我想添加缩放效果并能够移动地图.我怎样才能做到这一点?!?!
提前致谢!
所以,答案是:
var width = 960,
height = 400;
var projection = d3.geo.mercator()
.scale(200)
.translate([width/2, height]);
function zoomed() {
projection
.translate(d3.event.translate)
.scale(d3.event.scale);
geoChart.render();
}
var zoom = d3.behavior.zoom()
.translate(projection.translate())
.scale(projection.scale())
.scaleExtent([height/2, 8 * height])
.on("zoom", zoomed);
var svg = d3.select("#geo-chart")
.attr("width", width)
.attr("height", height)
.call(zoom);
geoChart
.projection(projection)
.width(1000)
.height(400)
.transitionDuration(1000)
.dimension(countryDim)
.group(ctrGroup)
.filterHandler(function(dimension, filter){
dimension.filter(function(d) {return geoChart.filter() != null ? d.indexOf
(geoChart.filter()) >= 0 : true;}); // perform filtering
return filter; // return the actual filter value
})
.colors(d3.scale.quantize().range(["#E2F2FF", "#C4E4FF", "#9ED2FF", "#81C5FF",
"#6BBAFF", "#51AEFF", "#36A2FF", "#1E96FF", "#0089FF", "#0061B5"]))
.colorDomain([0, 200])
.colorCalculator(function (d) { return d ? geoChart.colors()(d) : '#ccc'; })
.overlayGeoJson(statesJson.features, "state", function (d) { return d.id; })
.title(function (d) {
return "State: " + d.key + " " + (d.value ? d.value : 0) + " Impressions";
});