javascript - 打开 d3 树布局以显示用户通过在搜索框中键入 request 搜索的节点

Question

我正在使用 Mike Bostock 的 tree layout作为可搜索树的基础。我想知道用户是否可以在搜索框中输入名称，如果在树中找到它，树是否可以将其节点打开到命名节点。

`{
  "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`

例如，所有节点都关闭了，只有根节点“flare”显示在屏幕上，用户搜索“MergeEdge”，它被发现是“analytics”下“cluster”下的叶节点。然后树将只打开显示“cluster”子节点所需的那些节点，因为这是找到“MergeEdge”的地方。我已经尝试过使用 jsonpath.js，但并没有走得太远，也没有得到这个 question 的答案。我得到了返回，但只有当节点打开显示我正在搜索的节点时。

我想使用不同的 json 文件，这些文件可能包含太多节点，无法一次显示所有节点。

Answer 1

如果您的代码基于 example 中的代码你链接，那么这应该很简单。

当页面最初加载时，为每个节点调用 toggle 函数以确保隐藏所有子节点。现在除了根之外的所有节点都被隐藏了，您需要使用每个节点的 _children 属性来查找子节点。一旦找到与所搜索名称相匹配的子节点，就对其调用 toggle 并且每个父节点都返回到根节点。要重新显示带有切换节点的图形，请调用 update。