可缩放树中的D3js V4中心节点

Question

我在Rob Schmuecker中找到了这个例子,用于将一个节点集中在一个被点击的树中.此示例适用于D3js版本3.我将此示例移植到d3js版本4.但是在我的例子中,如果我试图移动svg,svg将在居中后跳转.有人知道什么是错的吗？这里有一些代码片段.

var baseSvg = d3.select("#tree-container").append("svg").attr("width", viewerWidth)
                                                        .attr("height", viewerHeight)
                                                        .attr("class", "overlay")
                                                        .call(zoomListener);

function zoom() {
  if(d3.event.transform != null) {
    svgGroup.attr("transform", d3.event.transform );
  }
}

function centerNode(source) {
  t = d3.zoomTransform(baseSvg.node());
  x = -source.y0;
  y = -source.x0;
  x = x * t.k + viewerWidth / 2;
  y = y * t.k + viewerHeight / 2;
  d3.select('g').transition().duration(duration).call( zoomListener.transform, d3.zoomIdentity.translate(x,y).scale(t.k) );
}

Answer 1

将centerNode中的选择从'g'更改为'svg'似乎可以解决问题.这可能是因为在svg元素上调用了zoom侦听器.

作为参考,centerNode函数现在看起来像这样:

function centerNode(source) {
  t = d3.zoomTransform(baseSvg.node());
  x = -source.y0;
  y = -source.x0;
  x = x * t.k + viewerWidth / 2;
  y = y * t.k + viewerHeight / 2;
  d3.select('svg').transition().duration(duration).call( zoomListener.transform, d3.zoomIdentity.translate(x,y).scale(t.k) );
}