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

简单放大d3.js

1 个答案: