如何根据用户偏好处理通过d3.js呈现的过滤节点和边缘？

链接到我的代码（Plunker）

我正在开发D3.js强制布局的网络图，用于学术目的。 到目前为止，我编写了一个显示节点和边缘的图表。 我在jquery中有一个自动完成的文本框，用户可以在其中输入节点名称。

D3.js（仅代码的一部分。有关完整代码，请参阅我的plunker链接）：

var force = d3.layout.force() .nodes(d3.values(nodes)) .links(links) .size([width, height]) .linkDistance(100) .charge(-1546) .on("tick", tick) .start(); var svg = d3.select("#schemio") .append('svg') .attr("width", width) .attr("height", height); var link = svg.selectAll(".link") .data(force.links()) .enter().append("line") .attr("class", "link"); var node = svg.selectAll(".node") .data(force.nodes()) .enter().append("g") .attr("class", "node") .call(force.drag); 

HTML：

 
 Filter:    

Jquery（自动完成）

 $(function() { $( "#tags" ).autocomplete({ source: nodesArray }); }); 

我想要一种function，当用户在filter框中输入节点名称时，我需要删除图中的所有其他节点和边缘，并仅保留该特定节点及其直接关联的节点和边（一跳）。

例：

当我在filter框中键入“Parent”时，它必须删除所有其他节点和边缘，并仅保留“Parent”节点及其直接子节点（child1，child2，child3）。

当用户搜索特定术语时，过滤节点和边缘的可行方法是什么？

提前致谢。

Answer 1

实质上 ，用户通过搜索特定节点名称所做的是缩小可视化将要显示的数据 。

该方法

1. 首先，您需要使用过滤或在您的情况下有意义的任何内容缩小源数据。 您最终得到了过滤后的数据 。
2. 然后，您需要selection已经绘制的所有节点，并将selection与步骤1中的过滤数据相结合 。
3. 最后使用d3 enter ， update和exit选择来添加，更新和删除节点和链接。

例

Mike Bostock发表了[修改部队布局]的例子。（ https://bl.ocks.org/mbostock/1095795 ）