Question

我从Rob Schmuecker那里找到了这个example，用于将一个节点集中在一个被点击的树中。此示例适用于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中的选择＆＃39; g＆＃39;到＆＃39; svg＆＃39;似乎可以做到这一点。这很可能是因为在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) );
}

Answer 2

请在文档中查看Collapsible Tree的此示例。它可能对您有帮助，它正在使用D3.js的第4版

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

2 个答案: