d3.js - 可缩放树中的 D3js V4 中心节点

Question

我找到了这个 example来自 Rob Schmuecker，用于将单击的树中的节点居中。此示例适用于 D3js 版本 3。我将此示例移植到 d3js version 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 元素上调用了缩放监听器。

作为引用，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) );
}