javascript - 如何根据用户偏好过滤通过 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
    });
});

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

示例:

当我在过滤框中输入“Parent”时，它必须删除所有其他节点和边，并仅保留“Parent”节点及其直接子节点(child1、child2、child3)。

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

提前致谢。

Answer 1

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

方法

1. 首先，您需要使用过滤或任何适合您情况的方法来缩小源数据的范围。您最终会得到过滤后的数据。
2. 然后您需要selectAll已经绘制的节点，并使用过滤数据加入选择从第 1 步开始。
3. 最后使用 d3 enter、update 和 exit 选择来添加、更新和删除节点和链接.

示例

Mike Bostock 发布了[修改强制布局]的示例。( https://bl.ocks.org/mbostock/1095795 )