D3 树 - 如何扩展树以显示和突出显示所有同名节点？

Question

我将Patrick Brockmann's CollapsibleTree Search 用于我的 D3 树，其中树会根据Select2、#search 中选择的术语展开以显示和突出显示链接和节点。这很好用。

我现在有一个场景，我需要通过单击按钮来自动展开树以显示和突出显示（根据 Patrick Brockmann 的示例）与相同名称匹配的所有节点，即d.name = 'Bill'。

可以显示没有该名称的节点，但我只希望该名称的节点显示为红色，并按照 Patrick 的示例使用红色连接器。

见Fiddle

Answer 1

如果我很好理解这个问题，它已经像这样工作了，你只需要在别处输入并调用搜索。

例如，我在 html 中添加了一个输入文本，并在每次值更改时调用搜索。

<input type="text" id="searchText" value="test">

$("#searchText").on("input", function(e) {
    clearAll(root);
    expandAll(root);
    update(root);

    searchField = "d.name";
    searchText = e.target.value;
    //console.log(searchText);
    searchTree(root);
    root.children.forEach(collapseAllNotFound);
    update(root);
})

这是获取“Patrick Brockmann 的 CollapsibleTree Search”示例的补丁，用于处理输入文本

--- index.html.orig     2019-09-04 01:06:06.545853315 +0200
+++ index.html  2019-09-04 01:13:30.291689888 +0200
@@ -55,6 +55,7 @@
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css"></link>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>

+<input type="text" id="searchText" value="test">
 <div id="block_container">
    <div id="searchName"></div>
 </div>
@@ -157,6 +158,19 @@     searchTree(root);
     root.children.forEach(collapseAllNotFound);
     update(root);
+})
+
+$("#searchText").on("input", function(e) {
+    clearAll(root);
+    expandAll(root);
+    update(root);
+
+    searchField = "d.name";
+    searchText = e.target.value;
+    console.log(searchText);
+    searchTree(root);
+    root.children.forEach(collapseAllNotFound);
+    update(root);
 })