multiple force layouts same page

问题

I am attempting to create a force layout where not all the nodes connect with links. Additionally, I got some terrific help with centering a node when it is clicked (reference to question here).

I would like to incorporate the two together, but am a bit stuck.

I created a JSFiddle where I modified the original data where not every node has a link; however, as you can see from the Fiddle, only a single node is drawn and nothing else is displayed.

The data looks something like this:

[
                {   "name": "cluster",
                    "children": [
                        {"name": "AgglomerativeCluster", "size": 3938},
                        {"name": "CommunityStructure", "size": 3812},
                        {"name": "HierarchicalCluster", "size": 6714},
                        {"name": "MergeEdge", "size": 743}
                    ]
                },
                {
                    "name": "graph",
                    "children": [
                        {"name": "BetweennessCentrality", "size": 3534},
                        {"name": "LinkDistance", "size": 5731},
                        {"name": "MaxFlowMinCut", "size": 7840},
                        {"name": "ShortestPaths", "size": 5914},
                        {"name": "SpanningTree", "size": 3416}
                    ]
                },
                {
                    "name": "optimization",
                    "children": [
                        {"name": "AspectRatioBanker", "size": 7074}
                    ]
                }
]

I am not certain, but it seems to me when I try: var nodes = flatten(root) this is going to cause some problems.

I found some examples where multiple force layouts are shown in a single svg, but I am thinking this is going to cause some problems when I re-center by clicking.

来源：https://stackoverflow.com/questions/20864034/multiple-force-layouts-same-page