d3.js v4将视口移动到特定节点

Posted 2021-03-30

我使用d3.js v4来构建力导向图，就像在基本示例中一样。我还创建了输入字段，用户可以在其中键入节点名称。然后我像这样搜索匹配的circle元素：

findNode(name) {
    let theNode = this.d3Svg.selectAll('circle').filter(function(d) {
      return d.name == name;
    });
}

之后，我想将视口移动到foundNode。我怎样才能做到这一点？

试过这个：this.d3.zoom().translateTo(theNode, theNode.x, theNode.y);但没有任何反应。以下是console.log('theNode: ',theNode)所说的：

我也找到了similar question，但在那里使用了一些旧版本的d3。

答案

Here是解决方案。以下代码将视口带到中心：

svg.transition()
          .duration(750)
          .call(zoom.transform, d3.zoomIdentity.translate([width / 2, height / 2]));