关于javascript：重新渲染图形时如何保持当前的缩放比例和翻译级别

How to keep current zoom scale and translate level when re-rendering graph

我有一个d3图形，该图形允许平移和缩放行为。它还具有subGraph功能，该功能允许用户扩展和折叠subGraph。当用户单击图标以打开和关闭子图时，此代码将运行：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

我基本上是在单击该图标时添加和删除该节点的subGraph属性。然后完全重画图形。

我可以获得父容器的x和y坐标，但是如果我重新渲染图形，该如何渲染图形，以使图形保持与我时相同的比例和平移度单击切换子图图标。我试图在子图展开或折叠之前将图重新绘制在与之前相同的位置。下面的代码似乎在图形渲染时在与我抗争：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

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

谢谢

我只是通过跟踪当前比例和转换值来解决它：

1
2
3
4
5
6
7
8

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

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

});

然后在上面的scaleGraph函数中重新渲染图形时，我只是查看是否由于切换了subGraph而重新渲染了图形，如果有的话，则使用当前的比例尺和平移值：

1
2
3
4
5

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

}

我为您创建了一个小提琴。
小提琴

请检查功能refreshGraph

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

我使用过window.zoom(使用过的窗口让您知道这是共享的)

按钮重置可将缩放级别切换到0比例，并再次返回到原??来的位置。

希望有帮助。