Center graph on a specific node

[LonelyPrincess]

I need to be able to select a node and focus the view on it: the displayed part of the graph should be centered around that node. This link here has an example which illustrates what I want quite well.

In my case, I need to do this programatically, without any user interaction. I have been unable to find anything related to this in the project documentation, so I guess there's no way to do this so far.

I've trying to figure out how to do this myself, but I'm still unsure on how to approach this issue.

Is this feature planned for an upcoming release? If not, do you have any idea on how to achieve this? Any tip you could give me would be much appreciated. 🙂

[danielcaldas]

This is a nice feature @LonelyPrincess. Adding up on your examples here are a few more:

• mbostock - mousewheel-zoom + click-to-center
• click-to-zoom via transform

Since this is a pure side effect on d3 zomming we don't need to maintain state of special properties for nodes or links (at least not that I can think of right now 😛)... So.. I guess this could be achieved by using a similar handler that the one you can see in that second example function clicked(d) where the transition is performed.

// from https://bl.ocks.org/mbostock/2206590
function clicked(d) {
  var x, y, k;

  if (d && centered !== d) {
    var centroid = path.centroid(d);
    x = centroid[0];
    y = centroid[1];
    k = 4;
    centered = d;
  } else {
    x = width / 2;
    y = height / 2;
    k = 1;
    centered = null;
  }

  g.selectAll("path")
      .classed("active", centered && function(d) { return d === centered; });

  g.transition()
      .duration(750)
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
      .style("stroke-width", 1.5 / k + "px");
}

Wanna give it a try?

[LonelyPrincess]

Thanks a lot for the examples, @danielcaldas!

Oh, sure! I'll give it a go then. I'll make sure to submit a PR as soon as I have something. 😉

[gregorykan]

i want this feature 😱

[danielcaldas]

Closed with #107