使用d3.behavior.zoom縮放到特定組ID/getBBox（）

我正在嘗試使用d3.behavior.zoom()功能製作交互式平移/縮放SVG平面佈局圖/地圖。我基於我的代碼鬆散地在Zoom to Bounding Box II。使用d3.behavior.zoom縮放到特定組ID/getBBox（）

我異步經由$.get()加載SVG然後使用button.on('click')處理程序由元件ID，#g-1101（表示爲對SVG一個紅色圓圈），以獲得一個特定的<g>的.getBBox()。然後我想將svg的視口居中在#g-1101的邊界框中間。

作爲一個粗略的嘗試，我只是想通過使用g#1101的.getBBox().x && .getBBox().y來翻譯頂級svg > g。在我看來，我的數學是關閉的。

我試過將(svg.node().getBBox().width/2) - scale * g.getBBox().x)合併到邊界框的中間點到視口中心，但它的翻譯甚至沒有在球場上。

代碼

(function(){ 

var svg, g; $.get('http://layersofcomplexity.com/__fp.svg', function(svg){ 
    $('body').append($(svg)); 
    init(); 
    },'text'); 

    function init() { 

    console.log('init'); 

    svg = d3.select('svg'); 
    g = d3.select('svg > g'); 

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

    svg 
    .call(zoom) 
    .call(zoom.event); 

    $('.pan').on('click', function(){ 
//  var id = '#g-1011'; 
     var scale = 4; 
     var bbox = $('#g-1101')[0].getBBox(); 
//  d3.select(id).node().getBBox(); 
     var x = bbox.x; 
     var y = bbox.y; 
     // var scale = .9/Math.max(dx/width, dy/height), 
     // var translate = [width/2 - scale * x, height/2 - scale * y]; 
     var width = svg.node().getBBox().width; 
     var height = svg.node().getBBox().height; 
     var translate = [-scale*x,-scale*y]; 
     g.transition().duration(750) .call(zoom.translate(translate).scale(scale).event); 
    }); 

    } 

    function zoomed() { 
    g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 
} 

})();

- 編輯JSBin被打破 -

我缺少什麼？ JSBin。

來源

2015-11-07 tr3online

不明確的小提琴被縮放的平移是有什麼特別你在這裏看...問題不明確.. – Cyril

當我上傳SVG並製作JSBin時，我在朋友的計算機上。顯然它搞砸了，所以我就修好了。它應該現在工作。理想情況下，我可以點擊Pan按鈕並平移/縮放到g＃g-1101 – tr3online

JSBin沒有任何反應。意？ – kwoxer

在代碼中居中標記爲紅色

var bbox = $('#g-1101')[0].getBBox(); 


    var x = bbox.x-((bbox.width)); 
    var y = bbox.y-((bbox.height)); 
    //scale should be 1 less 
    var translate = [-(x*(scale-1)),-(y*(scale-1))];

工作代碼的一個小的變化here

希望這有助於

來源

2015-11-08 04:16:45 Cyril

使用d3.behavior.zoom縮放到特定組ID/getBBox（）

回答

相關問題