Question

I am using Mike Bostock’s tree layout as the basis for a searchable tree. I am wondering if it is possible for a user to input a name into a search box and the tree to open its nodes to the named node, if it found within the tree.

`{
  "name": "flare",
  "children": [
     {
      "name": "analytics",
      "children": [
         {
          "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}
             ]
         }
     ]
}, ...etc`

So for example the nodes are all closed down, only the root node “flare” is showing on screen and the user searches for “MergeEdge” which is found as a leaf node under “cluster” which is under “analytics”. The tree would then open only those nodes required to show the children of “cluster” because that is where “MergeEdge” was found. I have tried with jsonpath.js but didn’t get very far and with the answer to this question which I was getting returns with but only when the nodes are open displaying the one I’m searching for.

I want to use different json files that may have too many nodes to display all of them at once.

Answer 1

If you code is based off the code from example you linked, then this should be pretty simple.

When the page loads initially, call the toggle function for every node to ensure that all children are hidden. Now that all nodes except the root are hidden, you need to use the _children attribute of each node to find the children. Once you find the child that matches the name that is searched for, call toggle on it and every parent back up to the root. To re-display the graph with the toggled nodes call update.