出于学术目的,我正在 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)。
当用户搜索特定术语时过滤节点和边的可行方法是什么?
提前致谢。
最佳答案
本质上,用户通过搜索特定节点名称所做的就是缩小可视化要显示的数据。
方法
- 首先,您需要使用过滤或任何适合您情况的方法来缩小源数据的范围。您最终会得到过滤后的数据。
- 然后您需要
selectAll
已经绘制的节点,并使用过滤数据加入选择
从第 1 步开始。 - 最后使用 d3
enter
、update
和exit
选择来添加、更新和删除节点和链接.
示例
Mike Bostock 发布了[修改强制布局]的示例。( https://bl.ocks.org/mbostock/1095795 )
关于javascript - 如何根据用户偏好过滤通过 d3.js 渲染的节点和边?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37649329/