Come aggiungere l'effetto zoom a dc.geoChoroplethChart?

Question

Ho iniziato a utilizzare la libreria dc.js per creare tutti i tipi di grafici e mi sono imbattuto in un problema quando stavo cercando di creare una mappa di Geo Choropleth usando dc.js e non potevo aggiungere la possibilità di zoomare e spostare la mappa.
Tutti gli esempi che ho visto utilizzavano d3 e svg .. ma una volta utilizzati questi esempi, non sono riuscito a utilizzare i dati di dc.dimention e tutti i calcoli del crossfilter.

per esempio il mio codice è:

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

che funziona bene, ma voglio aggiungere l'effetto zoom e di essere in grado di spostare la mappa. Come lo posso fare?!?!

grazie in anticipo!

Answer 1

Quindi, la risposta è:

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