d3.js中的简单放大

Question

I am trying to implement a simple zoom in d3.js, simpler than all the examples I have gone through (I suppose) but it just doesn't wanna work. So, the functionality that I want to implement is: the user clicks on a section of the graph and that section zooms at a predefined fixed size in the centre of the chart; the user cannot zoom it any further, no panning either. And when the user clicks at any other section of the chart, the zoomed section translates back to its normal/original position.

var container = svg.append("g").classed("container-group", true);
        container.attr({transform: "translate(" + 40*test_data.row + "," + 40*test_data.col + ")"});
        container.call(d3.behavior.zoom().scaleExtent([1,5]).on("zoom", zoom));

function zoom() {
        container.attr("transform","translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    }  

I have tried zoom.translate and zoom.size but couldn't get them right. And don't know how to reset the zoomed section either.

Any help would be much appreciated !

Answer 1

I´ll give an example of zooming some circles. Clicking on the red rectangle will zoom out to 50%, clicking on the blue one will return to a 100% scale. The exact functions you are looking for are zoomOut() and initialZoom()

var zoomListener = d3.behavior.zoom().scaleExtent([0.1, 3]);

width = 200 ;
height = 200 ;

//svg
var svg = d3.select("body").append("svg").attr("id","vis")
.attr("width", width )
.attr("height", height );

//transition listener group
var svgGroup = svg.append("g").call(zoomListener);

//zoom in and zoom out buttons
svg.append("rect").attr("x",0).attr("y",0).attr("width",50).attr("height",50).style("fill","red").on("click",zoomOut);
svg.append("rect").attr("x",0).attr("y",50).attr("width",50).attr("height",50).style("fill","blue").on("click",initialZoom);


var i,k;
for(i=90;i<width-20;i+=20){
    for( k=20;k<height-20;k+=20){
        svgGroup.append("circle").attr("cx", i).attr("cy", k).attr("r", 10);
    }   
}


function zoomOut(){
    //fix transition to center of canvas
    x = (width/2) * 0.5;
    y = (height/2) * 0.5;
    //zoom transition- scale value 150%
    svgGroup.transition().duration(500).attr("transform", "translate("+x+","+y+")scale(0.5)" );
}

function initialZoom(){
    //fix transition to center of canvas
    x = (width/2) ;
    y = (height/2) ;
    //zoom transition- scale value 100%
    svgGroup.transition().duration(500).attr("transform", "scale(1)" );
}