Javascript 重新渲染图形时如何保持当前缩放比例和平移级别

我有一个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坐标，但是如果我正在重新渲染图形，如何继续渲染图形，使图形保持与单击“切换子图形”图标时相同的比例和平移。我正试图在子图展开或折叠时，在与以前相同的位置重新绘制该图。下面是在图形呈现时与我发生冲突的代码：

   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);
            };

如果我检查是否已单击切换图标，我是否可以使用与重画之前相同的比例和平移重画图形

---

谢谢，我为你做了一把小提琴。

请检查函数刷新图

  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（使用window让您知道这是共享的）

“重置”按钮将缩放级别切换为0比例，并在再次单击时切换回原来的位置

---

希望有帮助。

我刚刚通过跟踪当前的比例和平移值解决了这个问题：

  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;

  });

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

   }

---

感谢Ganesh，只是为了确保我正确理解window.zoom跟踪当前比例和平移，并在图形重新渲染时保持不变？因为我确实需要重新绘制带有更新节点的图，子图要么展开，要么折叠。我更新了我的第一篇文章，写了我想让它发挥作用的东西。。再次感谢是的，窗口变量跟踪当前比例。共享缩放对象时，比例会自动更新以反映缩放坐标。因此，当您重新渲染时，它应该可以工作。我也在上面的小提琴中再次调用draw方法。如果有效，请将其标记为答案。如果有效，我们肯定会将其标记为答案。我更新了我的帖子。我单击切换图标，它将展开或折叠图形，然后获取窗口变量并重新渲染整个图形。我仍然可以用这种方法调用scaleGraph函数吗？还是不必调用？窗口变量是否覆盖我在scaleGraph中调用的缩放方法？谢谢，我不认为这对我有用。我不确定我是否理解该函数在做什么。当你调用window.zoom上的scale方法时，它实际上会更改你的d3 scale对象，使用这个修改过的d3scales，你需要重新渲染图形。因此，您可以将图形缩放到所需的比例。您应该共享缩放功能中的比例和图形渲染。在小提琴中，如果您单击重置按钮两次，第一次将重置为0比例（即无缩放），第二次将恢复缩放。您可以在小提琴中缩放图形，然后多次单击“重置”按钮。