[D3] [SVG] увеличить на объект

Question

не могли бы вы помочь мне с масштабированием объектов SVG. не знаю, как это сделать. мне нужно увеличить и центр щелчком на объекте, я сделал пробный plunkr, поэтому, пожалуйста, посмотрите: http://plnkr.co/edit/ZQxhQ8VVoIXjMvdFIvQF
вот полный код:

$(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?? 
    }); 
}); 

Answer 1

Вы должны использовать 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

В демке, я изменил положение полигонов и viewBox на svg, чтобы сделать его легче вычислить точные координаты для перехода к для масштабирования, чтобы оставаться в центре. Я также добавил некоторые переходы и поведение «zoom-to-zero», которые не показаны в выдержке кода выше.

---

Sidenote: Вы не должны использовать jQuery здесь, чтобы связываться с click событий; D3's selection.on может предоставить эту функцию.