[D3] [SVG]放大到对象

请帮我缩放SVG对象。不知道如何做到这一点。我需要放大，并通过点击对象中心，我做了一个测试plunkr，所以请大家看看：http://plnkr.co/edit/ZQxhQ8VVoIXjMvdFIvQF
这里是全码：[D3] [SVG]放大到对象

$(function(){ 
    svg = d3.select("#svg"); 
    svg_group = d3.select('#outer_group'); 

    zoom = d3.behavior.zoom() 
     .translate([0, 0]) 
     .scale(1) 
     .scaleExtent([.5, 20]) 
     .on("zoom", zoomed); 

    svg.call(zoom); 

    function zoomed() { 
    svg_group.style("stroke-width", 1.5/d3.event.scale + "px"); 
    svg_group.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 
    $zoomService.$broadcast('zoom', { 
     scale: d3.event.scale 
    }); 
    } 

    $('.sector').click(function(){ 
    //zoom to somehow?? 
    }); 
});

来源

2015-01-16 Fen1kz

你必须在正确的元素上使用call zoom.event明确设置好所需的翻译和缩放后。

var zoomed = false; 
    $('.sector').click(function(){ 
    var bbox = this.getBBox(); 
    var scale = 4; 

    // Manually calculating the position to which to transition to 
    // Will differ on a case by case basis. 
    svg 
    .call(zoom 
      .translate([ (- bbox.x - bbox.width/2) * scale 
        , (- bbox.y - bbox.height/2) * scale 
        ]) 
      .scale(scale).event 
    ); 
    });

演示：http://plnkr.co/edit/h1UP87dfQneRCFye9Xtu?p=preview

在演示中，我改变了多边形的位置，并在svg的viewBox，使之更容易地计算出准确的坐标转换为变焦保持居中。我还添加了上面代码摘录中未显示的一些转换和缩放到零行为。

旁注：您不必使用jQuery这里绑定到click事件; D3的selection.on可以提供该功能。

来源

2015-01-16 22:14:35

谢谢。我的主要问题是在SVG视图框设置，我不知道负面的X =宽度/ 2和Y =高度/ 2的视图容易居中。 – Fen1kz

[D3] [SVG]放大到对象

回答

相关问题