dc.geoChoroplethChart में ज़ूम प्रभाव कैसे जोड़ें?

Question

मैंने सभी प्रकार के ग्राफ बनाने के लिए dc.js लाइब्रेरी का उपयोग करना शुरू किया और जब मैं डीसीजेएस का उपयोग कर जिओ चोरोप्लेथ मानचित्र बनाने की कोशिश कर रहा था और मैप को स्थानांतरित करने और स्थानांतरित करने की क्षमता नहीं जोड़ सका तो मैंने एक समस्या में उछाल दिया।
मैंने देखा सभी उदाहरण 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"; 
    });