zooming in and out with a geoChoroplethChart?

[centurio]

Hi,

i want zooming in and out on a geoChoroplethChart. I find a example for d3.js, but i cannot transfer it on a geoChoroplethChart.

This is what i found for d3.js:

var zoom = d3.behavior.zoom()
    .on("zoom",function() {
        g.attr("transform","translate("+ 
            d3.event.translate.join(",")+")scale("+d3.event.scale+")");
        g.selectAll("path")  
            .attr("d", path.projection(projection)); 
});

svg.call(zoom)

Can someone write an example with a full geoChoroplethChart please?

Thank you for any helping and sorry for my bad english =)

[centurio]

Have somebody an idea?

[Nick Zhu]

See this recipe from my D3 Cookbook

http://nickqizhu.github.io/d3-cookbook/src/chapter12/choropleth.html

[centurio]

Thank you for the answer =)

Sadly my transfer to a geoChoroplethChart doesnt work.

My code :

var choroplethChart = dc.geoChoroplethChart("#choropleth-chart")
        .width(990)
        .height(600);
       
var projection = d3.geo.mercator()
.center([0,40])
.scale(400)
.rotate([-12,0]);



d3.json("geo/us-states.json", function (states) {
   
        choroplethChart
                .dimension(stateDimension)
                .group(stateValueSumGroup)
                .colors(["#ccc", "#E2F2FF", "#C4E4FF", "#9ED2FF", "#81C5FF", "#6BBAFF", "#51AEFF", "#36A2FF", "#1E96FF", "#0089FF"])
                .colorDomain([0, 155])
                .projection(projection)
               
                .overlayGeoJson(states.features, "state", function (d) {
                    return d.properties.name;
                })
               
                .title(function (d) {
                    return d.key ;
                });

        dc.renderAll();
   
});

How i can bind the zoom function in this choroplethChart?

Thank you very much for any help!

[Onur Candan]

Try this;

var width = 960,

    height = 400;

var projection = d3.geo.mercator()

.center([0,60])

.scale(150)

.rotate([-10,0]);

function zoomed() {

    projection

    .translate(d3.event.translate)

    .scale(d3.event.scale);

    choroplethChart.render();

}

var zoom = d3.behavior.zoom()

    .translate(projection.translate())

    .scale(projection.scale())

    .scaleExtent([height/2, 8 * height])

    .on("zoom", zoomed);

var svg = d3.select("#choropleth-chart")

    .attr("width", width)

    .attr("height", height)

    .call(zoom);

8 Ocak 2014 Çarşamba 13:17:56 UTC+3 tarihinde centurio yazdı: