简单放大 d3.js答案

【问题标题】：simple zoom in d3.js简单放大 d3.js
【发布时间】：2014-05-18 15:32:11
【问题描述】：

我正在尝试在 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 但无法正确使用它们。也不知道如何重置缩放部分。

任何帮助将不胜感激！

【问题讨论】：

缩放行为对于这个来说太过分了，可能会让事情变得更加困难。看看this example。

标签： javascript d3.js zooming

【解决方案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)" );
}

【讨论】：