D3.js縮放和平移到元素點擊

我已經經歷了幾篇文章，關於如何縮放到一個更大的SVG中的元素，它本身也有縮放和平移功能，但沒有任何運氣。我有一個大的地圖，你可以放大和平移到元素手動工作，但我想要它縮放和平移到任何元素本身點擊這樣一個元素。我似乎無法爲轉型獲得正確的價值。D3.js縮放和平移到元素點擊

這裏是什麼我到目前爲止得到了的jsfiddle：http://jsfiddle.net/1gyjd2xt/1/

var svg = d3.select("#svg-container svg"); 

var container = svg.select("#container"); 

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

svg.call(zoom); 

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


d3.selectAll(".text").on("click", function() { 

    var t = d3.transform(d3.select(this).attr("transform")), 
     x = t.translate[0], 
     y = t.translate[1]; 

    console.log(x); 
    console.log(y); 
    var scale = 10; 

    //Zoom to element 
       //svg.transition() 
        //.call(zoom 
        //.translate(calculate X, calculate Y) 
        //.scale(scale).event); 

});

來源

2015-05-28 Dries Crauwels

好吧，我設法找到正確的座標。我只需再次調用縮放並使用從文本元素中獲得的X和Y，然後縮放左上角的對象，使其位於視圖的原點。所以，如果我然後添加我的視圖的高度和寬度除以2我有放大中心。使用縮放行爲，它不會混淆我的標準縮放和用鼠標平移，並始終使用當前的X和Y縮放到我單擊的元素。

svg.transition().duration(3000) 
    .call(zoom.translate([((x * -scale) + (svgWidth/2)), ((y * -scale) + svgHeight/2)]) 
    .scale(scale).event);

這裏有一個更新的小提琴：http://jsfiddle.net/1gyjd2xt/4/

來源

2015-06-11 17:03:13

變焦感覺有點怪，我會說。這是你的真正意圖嗎？ – kwoxer

我設法通過向縮放行爲添加大小來使其更好地工作。它在這裏說https://github.com/mbostock/d3/wiki/Zoom-Behavior，在轉換過程中需要大小來支持平滑縮放。 –

D3.js縮放和平移到元素點擊

回答

相關問題