2

我使用 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 文件，这些文件可能有太多节点来一次显示所有节点。

4

1 回答 1

1

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

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

于 2012-07-20T14:22:51.440 回答