How to add zoom-in and zoom-out buttons in dc.geoChoroplethChart

Question

I wanted to add zooming effect to dc.geoChoroplethChart() . I am able to get Zoom-in and Zoom-out behavior with wheelmouse. I achieved with the help of this example. But, how to achieve this using Zoom-in and Zoom-out buttons? I tried multiple multiple ways to do this seeing d3 examples, but ended up unsuccessful and messing the code.

Thank you.

Answer 1

Here is my function for moving selected nodes with the arrow keys (ie translating)

function keydown()//-ability to move selected nodes with arrows
{
    if (!d3.event.metaKey) switch (d3.event.keyCode) {
    case 38: nudge( 0, -1); break; // UP
    case 40: nudge( 0, +1); break; // DOWN
    case 37: nudge(-1,  0); break; // LEFT
    case 39: nudge(+1,  0); break; // RIGHT
}

Nudge function :

function nudge(dx, dy) //-use arrow keys to nudge selection
{   
    force.stop(); //-stops the force layout
    tick(); //-calls tick

    nodes.filter(function(d) { return d.selected; })            
        .attr("cx", function(d) { return d.x += dx; })
        .attr("cy", function(d) { return d.y += dy; });
}

You can use this so instead of translate, use scale