如何在重新渲染圖形時保持當前縮放比例和平移水平

我有一個允許平移和縮放行爲的d3圖形。它還具有允許用戶展開和摺疊子圖的子圖功能。當該圖標的用戶點擊打開和關閉子圖運行此代碼：如何在重新渲染圖形時保持當前縮放比例和平移水平

btn.on("click", function(d:any, i:any) { 
     parentNode = nodeObject; // gives me he x and y coordinates of the parent node 
     d3.event["stopPropagation"](); 
     e["subGraph"].expand = !expand; // add or remove subGraph 

     window.resetGraph = !window.resetGraph; 
     console.log(window.resetGraph); 
     if (window.resetGraph) { 
       window.scale = window.zoom.scale(); 
       window.translate = window.zoom.translate(); 
       window.zoom.scale(1).translate([0 , 0]); 
     } else {  
            window.zoom.scale(window.scale).translate(window.translate); 
     } 

     console.log(window.zoom.scale()); 
     console.log(translate);  

     renderGraph(); 
});

我基本上是添加和圖標上點擊的去除該節點的子屬性。然後完全重繪圖。

我可以得到父容器的x和y座標，但是如果我正在重新渲染圖形，我該如何去渲染圖形，以便圖形保持與當時的相同比例和平移我點擊了切換子圖標。我正在嘗試重繪圖形，只是在展開或摺疊subGraph之前的位置。下面是這似乎在圖形渲染要打擊我的代碼：

var scaleGraph = function() { 
       var graphWidth = g.graph().width + 4; 
       var graphHeight = g.graph().height + 4; 
       var width = parseInt(svg.style("width").replace(/px/, ""), 10); 
       var height = parseInt(svg.style("height").replace(/px/, ""), 10); 
       var zoomScale = originalZoomScale; 
       // Zoom and scale to fit   
       if (ctrl.autoResizeGraph === "original") { 
        zoomScale = initialZoomScale; 
       } 


       translate = [(width/2) - ((graphWidth * zoomScale)/2) + 2, 1]; 

       zoom.center([width/2, height/2]); 
       zoom.size([width, height]); 

       zoom.translate(translate); 
       zoom.scale(zoomScale); 

       zoom.event(svg); 
      };

如果我檢查，如果切換圖標已被點擊，我可以重繪具有相同縮放和平移圖形，因爲它是重繪之前？

謝謝

來源

2016-08-23 bschmitty

我爲您創建了一個小提琴。 fiddle

請檢查功能refreshGraph

var refreshGraph =function(){ 
    window.resetGraph = !window.resetGraph; 
    console.log(window.resetGraph); 
    if(window.resetGraph){ 
    window.scale = window.zoom.scale(); 
    window.translate = window.zoom.translate(); 

    window.zoom.scale(1).translate([0,0]); 
    }else{ 
    window.zoom.scale(window.scale) 
    .translate(window.translate); 
    } 
    console.log(window.zoom.scale()); 

    console.log(translate); 

    draw(); 
}

我已經使用window.zoom（使用的窗口，讓你知道，這是共享）

按鈕復位切換縮放級別爲0的規模和如果再次點擊，則切換回原來的位置。

希望它有幫助。

來源

2016-08-23 01:24:41 Ganesh

感謝Ganesh神，只是爲了確保我的理解正確的是window.zoom跟蹤當前的規模和翻譯並且會在圖表重新呈現時持有該圖表？因爲我確實需要使用subGraph展開或摺疊的更新節點重新繪製圖形。我用自己想做的工作更新了我的初始帖子。再次感謝 – bschmitty

是的，窗口變量跟蹤當前的比例。當您共享縮放對象時，縮放會自動更新以反映縮放座標。所以當你重新渲染它應該工作。上面的小提琴也是再次調用draw方法。如果有效，請標記爲答案。 – Ganesh

如果解決問題，肯定會標記爲答案。我更新了我的帖子。我點擊切換圖標，該圖標會展開或摺疊圖形，然後獲取窗口變量並重新渲染整個圖形。我仍然可以用這種方法調用scaleGraph函數，還是不需要？窗口變量是否覆蓋了我在scaleGraph中調用的縮放方法？謝謝 – bschmitty

我只是解決它通過跟蹤當前縮放和平移值：

zoom.on("zoom", function() { 
     svgGroup.attr("transform", "translate(" + (<any>d3.event).translate + ")" + "scale(" + (<any>d3.event).scale + ")"); 

     // keep track of the currentZoomScale and currentPosition at all times 
     currentZoomScale = (<any>d3.event).scale; 
     currentPosition = (<any>d3.event).translate; 

    });

然後，當重新呈現以上我只是檢查，看是否圖形再次呈現在我scaleGraph函數曲線圖因爲子被觸發，如果它有那麼我使用當前的縮放和平移值：

if (ctrl.autoResizeGraph !== "original" && togglingSubGraph) { 
      zoomScale = currentZoomScale; // render the graph at its current scale 
      translate = currentPosition; // render the graph at its current position 

    }

來源

2016-08-23 22:00:59 bschmitty

如何在重新渲染圖形時保持當前縮放比例和平移水平

回答

相關問題