javascript - 简单放大 d3.js

Question

我正在尝试在 d3.js 中实现一个简单的缩放，比我已经经历过的所有示例(我想)都简单，但它只是不想工作。所以，我想要实现的功能是:用户点击图表的一部分，该部分在图表中心以预定义的固定大小缩放；用户无法进一步缩放，也无法平移。当用户点击图表的任何其他部分时，缩放部分会转换回其正常/原始位置。

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

我已经尝试了 zoom.translate 和 zoom.size 但无法正确使用。也不知道如何重置缩放部分。

任何帮助将不胜感激!

Answer 1

我将举一个缩放圆圈的例子。单击红色矩形将缩小到 50%，单击蓝色矩形将返回到 100% 比例。您正在寻找的确切功能是 zoomOut() 和 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)" );
}