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

Question

Link to my code (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：

<div class="ui-widget">
    <label for="tags">Filter: </label>
    <input id="tags">
</div>

Jquery（自动填充）

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

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

示例：

当我输入＆＃34; Parent＆＃34;在过滤器框中，它必须删除所有其他节点和边缘，并且只保留＆＃34; Parent＆＃34;节点及其直接子节点（child1，child2，child3）。

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

提前致谢。

Answer 1

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

方法

1. 首先，您需要使用过滤或在您的情况下有意义的任何内容缩小源数据。您最终得到过滤后的数据。
2. 然后，您需要selectAll已经绘制的节点，加入 selection 过滤数据，从步骤1开始。
3. 最后使用d3 enter，update和exit选项添加，更新和删除节点和链接。

实施例

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