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

Link positions are off, If a node is dynamically added. #37

Closed
Kirupakaran opened this issue Jun 27, 2016 · 4 comments
Closed

Link positions are off, If a node is dynamically added. #37

Kirupakaran opened this issue Jun 27, 2016 · 4 comments

Comments

@Kirupakaran
Copy link

Hi,
I tried to create a collapsible force layout using d3v4. Collapsing and expanding nodes works properly.
But, the link positions are off.

Check this fiddle:
https://jsfiddle.net/t4vzg650/5/

Children nodes' link x1, y1 values are not updated, causing them to not align with parent node.

@Kirupakaran
Copy link
Author

If you expand and collapse the root node, it seems as if the children of root form a separate force layout and the root nodes is not draggable.

@Kirupakaran
Copy link
Author

Another fiddle with simple force layout.

https://jsfiddle.net/n4m1r8nb/1/

Adding nodes dynamically on click. Same issue occurs.

@Kirupakaran Kirupakaran changed the title Link positions are off, If a node is removed from dom and readded again. Link positions are off, If a node is dynamically added. Jun 27, 2016
@mbostock
Copy link
Member

In update your code is setting node to just the entering nodes (node = node.enter().append("g")) and link to just the entering links (link = link.enter().append("line")), so subsequent redrawing of the graph only redraws the nodes and links that were entered in the last update.

You can fix this by merging enter and update after doing the data join. For example:

link = svg.selectAll(".link").data(links, function(d) { return d.target.id; })
var linkEnter = link.enter().append("line").attr("class", "link");
link = linkEnter.merge(link);

A fixed example:

http://bl.ocks.org/mbostock/a270e536f0f4e44c0bc765bf951893eb

I noticed another bug in your code which is that you initialize the new link’s source and target using the numeric id rather than references to the node objects. That’s fine, but the problem is you refer to d.target.id as the key in your data join before you’ve called link.links, and thus before the link has replaced your numeric id with a reference to the node object. It’s cleaner to initialize the link with the source and target references directly; link.id is really intended for when you want to serialize your graph to JSON (which doesn’t support object references).

function click(d) {
  var target = {id: index, name: "server " + index};
  nodes.push(target);
  links.push({source: d, target: target});
  index++;
  update();
}

@Kirupakaran
Copy link
Author

@mbostock , Thank you very much. :) And, Good luck for v4!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

2 participants