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

Open a d3 tree layout to show the node a user has searched for by typing request in a search box

本文关键字：搜索 request 显示 节点 用户 布局 d3 打开      更新时间：2023-09-26

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

`{
  "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"，该节点在"分析"下的"集群"下作为叶节点找到。然后，树将仅打开显示"cluster"子级所需的节点，因为这是找到"MergeEdge"的位置。我已经尝试过使用 jsonpath.js但没有走得太远，并且得到了这个问题的答案，我得到了回报，但只有当节点打开显示我正在搜索的节点时。

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

如果您的代码基于您链接的示例中的代码，那么这应该非常简单。

最初加载页面时，请为每个节点调用 toggle 函数，以确保隐藏所有子节点。现在，除根节点之外的所有节点都已隐藏，您需要使用每个节点的 _children 属性来查找子节点。找到与搜索的名称匹配的子项后，请对其调用toggle，并将每个父项备份到根目录。要重新显示带有切换节点的图形，请调用 update 。

相关文章：