Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Center graph on a specific node #102

Closed
LonelyPrincess opened this issue Aug 31, 2018 · 4 comments

Comments

@LonelyPrincess
Copy link
Collaborator

@LonelyPrincess LonelyPrincess commented Aug 31, 2018

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 comment has been minimized.

Copy link
Owner

@danielcaldas danielcaldas commented Sep 3, 2018

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

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

This comment has been minimized.

Copy link
Collaborator Author

@LonelyPrincess LonelyPrincess commented Sep 4, 2018

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

This comment has been minimized.

Copy link

@gregorykan gregorykan commented Oct 28, 2018

i want this feature 😱

@danielcaldas

This comment has been minimized.

Copy link
Owner

@danielcaldas danielcaldas commented Nov 13, 2018

Closed with #107

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.