Как сохранить текущий масштаб масштабирования и уровень перевода при повторном рендеринге

Question

У меня есть график d3, который позволяет управлять панорамированием и масштабированием. Он также имеет функцию subGraph, которая позволяет пользователю расширять и сворачивать subGraph. Когда пользователь нажимает на значок, чтобы открыть и закрыть подграф этот код работает:

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. Я пытаюсь перерисовать график в том же положении, что и раньше, только когда 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); 
      }; 

Если я проверяю, если тумблер икона была нажата, можно перерисовывать график с таким же масштабом и перевода, прежде чем он был перерисовать?

Thanks

Answer 1

Я создал для вас одну скрипку. 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 масштаба и переключается обратно туда, где это было, если нажать снова.

Надеюсь, это поможет.

Answer 2

Я просто решил ее путем отслеживания текущего масштаба и перевод значений:

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 

    }