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

【问题标题】：How to approach filtering nodes and edges rendered via d3.js according to user preference?如何根据用户偏好处理通过 d3.js 呈现的过滤节点和边缘？
【发布时间】：2016-06-06 03:56:45
【问题描述】：

Link to my code (Plunker)

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

D3.js（仅部分代码。完整代码见我的插件链接）：

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
    });
});

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

例子：

当我在过滤器框中输入“父”时，它必须删除所有其他节点和边，只保留“父”节点及其直接子节点（child1、child2、child3）。

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

提前致谢。

【问题讨论】：

不完全知道具体问题是什么。你在哪里卡住你的代码知道吗？
其实！我是 D3.js 的新手，我正在试验这个网络图。如果我需要我在问题中描述的功能，我想知道最好的方法是什么。我看到了许多示例，每个示例都以自己的方式实现。这个fiddle 使用过滤功能的例子，而我看到另一个例子，他们手动解析图中的所有节点并执行突出显示功能。
好的，谢谢。我已经编辑了您的问题，以便它的意图变得更加清晰。这是一个有价值的问题，所以我试图回答它。
当然！谢谢。另外，我已经删除了我的鼠标悬停和鼠标移出事件代码，因为它与我提出的问题无关。
感谢您删除鼠标悬停/鼠标移出代码。使查看问题/问题变得更容易。希望我的问题对你有所帮助。我建议看一下我在答案中链接到的示例。祝你好运。

标签： javascript jquery d3.js force-layout

【解决方案1】：

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

方法

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

示例

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

【讨论】：