dc.geoChoroplethChart에 줌 효과를 추가하는 방법은 무엇입니까?

Question

모든 종류의 그래프를 만들기 위해 dc.js 라이브러리를 사용하기 시작했으며 dc.js를 사용하여 지오 Choropleth지도를 만들려고 할 때 문제가 발생하여지도를 확대/축소하는 기능을 추가 할 수 없었습니다.
내가 본 모든 예제는 d3과 svg ..를 사용했지만 일단 예제를 사용하면 dc.dimention과 모든 교차 필터 계산의 데이터를 사용할 수 없었습니다.

예를 들어 내 코드는 다음과 같습니다 잘 작동하지만 줌 효과를 추가하고지도를 이동 할 수 있도록하려는

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"; 
       });   

. 내가 어떻게 할 수 있니?!?!

미리 감사드립니다.

Answer 1

그래서, 대답은 :

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"; 
    });