[D3] [SVG] 객체를 줌

SVG 객체를 확대하는 데 도움을 주시겠습니까? 어떻게해야할지 모르겠다. 내가 그렇게 살펴 보시기 바랍니다, 테스트 plunkr을 확대하고 개체를 클릭하여 센터, 난이 만든이 필요합니다 당신이 올바른 요소에 명시 적으로 call zoom.event를 사용할 필요가[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

: 여기 http://plnkr.co/edit/ZQxhQ8VVoIXjMvdFIvQF
는 전체 코드입니다 원하는 번역 및 배율을 설정 한 후

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을 변경했습니다. 또한 위의 코드 발췌 부분에 나와 있지 않은 일부 전환과 확대/축소 동작을 추가했습니다.

(!) 참고 : 당신은 click 이벤트에 바인딩 여기 jQuery를 사용할 필요가 없습니다; D3의 selection.on은 그 기능을 제공 할 수 있습니다.

출처

2015-01-16 22:14:35

감사합니다. 내 주요 문제는 svg보기 상자 설정에서, 나는 부정적인 x = width/2 및 y = 높이/2 쉬운 센터링을위한 viewbox에 대해 전혀 몰랐습니다. – Fen1kz

[D3] [SVG] 객체를 줌

답변

관련 문제