[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]放大到對象

回答

相關問題