Nasıl dc.geoChoroplethChart içine yakınlaştırma efekti eklenir?

Question

Her türlü grafiği oluşturmak için dc.js Kitaplığı'nı kullanmaya başladım ve dc.js kullanarak bir Geo Choropleth haritası oluşturmaya çalıştığımda ve haritayı yakınlaştırma ve taşıma özelliğini ekleyemediğimde sorunla karşılaştım.
Gördüğüm tüm örnekler d3 ve svg .. kullanıyordu, ancak bu örnekleri kullandıktan sonra dc.dimention ve tüm crossfilter hesaplamalarını kullanamadım.

örneğin benim kodudur: güzel çalışır, ama ben yakınlaştırma efekti eklemek ve harita taşımak isterler

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

. bunu nasıl yapabilirim?!?!

şimdiden teşekkürler!

Answer 1

Yani, cevap:

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