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

Question

I use d3.js v4 to build force-directed graph just like in the basic example. I've also created input field, where user can type the node name. Then I search the matching circle element like so:

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

After that I want to move viewport to the foundNode . How can I do that?

Tried this: this.d3.zoom().translateTo(theNode, theNode.x, theNode.y); but nothing happens. Here is what console.log('theNode: ',theNode) says:

I've also found similar question , but some older version of d3 is used there.

Answer 1

Here is the solution. The following code brings the viewport to the center:

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