我开始使用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";
});
Run Code Online (Sandbox Code Playgroud)
哪个效果很好,但我想添加缩放效果并能够移动地图.我怎样才能做到这一点?!?!
提前致谢!