因此,经过多次挖掘和反复试验,我得出了一个非常适合我的目的的答案。请注意,下面的代码只是我的代码的相关部分,而不是整个代码,某些变量是不言自明的,因此没有包含它们。这也是 d3.js 的第 4 版。
var zoom = d3.zoom()
.scaleExtent([0.3,2])
.on("zoom", zoomed);
var svg = d3.select("body")
.append("svg")
.attr("width", viewerWidth)
.attr("height", viewerHeight);
var zoomer = svg.append("rect")
.attr("width", viewerWidth)
.attr("height", viewerHeight)
.style("fill", "none")
.style("pointer-events", "all")
.call(zoom);
var g = svg.append("g");
zoomer.call(zoom.transform, d3.zoomIdentity.translate(150,0)); //This is to pad my svg by a 150px on the left hand side
function zoomed() {
g.attr("transform", d3.event.transform);//The zoom and panning is affecting my G element which is a child of SVG
}
function centerNode(source){
t = d3.zoomTransform(zoomer.node());
console.log(t);
x = t.x;
y = source.x0;
y = -y *t.k + viewerHeight / 2;
g.transition()
.duration(duration)
.attr("transform", "translate(" + x + "," + y + ")scale(" + t.k + ")")
.on("end", function(){ zoomer.call(zoom.transform, d3.zoomIdentity.translate(x,y).scale(t.k))});
}
根据 d3.js 页面上 v4 的示例,我使用了一个矩形来应用缩放
缩放行为应用于覆盖 SVG 的不可见矩形
元素;这确保它接收输入,并且指针
坐标不受缩放行为变换的影响。平移和缩放示例 http://bl.ocks.org/mbostock/4e3925cdc804db257a86fdef3a032a45
在我正在使用的中心节点功能中d3.zoomTransform(zoomer.node());
获取应用于页面的当前变换。
这个函数的目的只是使可折叠树垂直居中而不是水平居中,所以我保留当前的transform.x(这里t.x
) 相同。
我的 svg 中的坐标是翻转的,所以为什么y= source.x0
,源是我的可折叠树中单击的节点。 (“查看本线程顶部引用的示例,了解我试图转换为版本 4 的内容)
我将转换应用于我的 G 元素,然后我想将这些更改提交到缩放转换,为此我使用.on("end", function(){})
否则它会在转换中做出奇怪的行为,通过这样做它所做的只是设置转换的当前状态。
zoomer.call(zoom.transform, d3.zoomIdentity.translate(x,y).scale(t.k))
上面这一行将 x 和 y 的平移以及比例(等于当前状态)应用于单位矩阵,以获得 G 的新变换,然后将其应用于zoomer
这是我称之为的元素zoom
早些时候。
这对我来说就像一个魅力!