问题
I adapted Ger Hobbelt's original work with the assistance of @Mark to add labels to the expanded nodes in a previous Stackoverflow post:
Add labels to nodes in Hobbelt's "Group/Bundle Nodes" D3 force layout example?
When I added my own data to the reworked example I observe the most peculiar problem. See the new fiddle, below. Expand the orange node. Then expand the blue. Node 18 detaches from within the orange hull (the link for node 18 is gone! ) and there appears to be an invisible node in an extra link between nodes 25 and 13. If you collapse the blue hull again then the links appear normally. There must be an issue with how the links are calculated but I can't see it. Any idea what is causing this behaviour?
https://jsfiddle.net/NovasTaylor/7yu2g1b2
link.enter().append("line")
.attr("class", "link")
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; })
.style("stroke-width", function(d) { return d.size || 1; });
Could it be related to the order of defining the links and the nodes? See the code in the fiddle that follows link.enter() where var g and g.append are defined.
来源：https://stackoverflow.com/questions/28987690/d3-js-force-layout-group-bundle-nodes-links-breaking