Add “Zoomability” function to a d3.js map processing data from dc.js/crossfilter

问题

I'm working with this map.

Here is the file used to render it.

I want add the click-to-zoom via transform functionality demonstrated in that mbostock example.

In the map I'm using, this is the code that draws the map:

        //This is the data for the Map
    d3.json("data/europe5.json", function (error, eu) { 

        console.log('map', eu)
        usChart.width(590)
                .height(500)
                .dimension(countries)
                .group(countriesJobsdSum)
                .projection(d3.geo.mercator()
                    .scale((1200 + 1) / 2 )
                    .translate([660 / 4, 3360 / 4])
                    .precision(.1)
                    )
                .colors(d3.scale.quantize().range(["#E2F2FF", "#C4E4FF", "#9ED2FF", "#81C5FF", "#6BBAFF", "#51AEFF"]))
                .colorDomain([0, 200])
                .colorCalculator(function (d) { return d ? usChart.colors()(d) : '#ccc'; })
                .overlayGeoJson(eu.features, "countries", function (d) {
                    return d.properties.name;
                    //return d.properties.Country;
                })
                .transitionDuration(0)
                .title(function (d) {
                    return "Country: " + d.key + "\nNumber of Jobs: " + numberFormat(d.value ? d.value : 0) ;
                });

but it's inside of a larger function. The zoom feature is also a function, I'm not sure how these two functions could interoperate or how I might re-factor them to interact harmoniously together.

How to do that?

I would appreciate any and all insights or reference materials.

EDIT, added elsewhere: "I was trying to do it with this "renderlet" http://plnkr.co/edit/OWLStxfPMtDuZeHHvvH1?p=preview, but... doesn't seem that is the right direction."

来源：https://stackoverflow.com/questions/32986945/add-zoomability-function-to-a-d3-js-map-processing-data-from-dc-js-crossfilter

标签

javascript

d3.js

dc.js

crossfilter