Как подходить к фильтрации узлов и ребер, отображаемых с помощью d3.js, в соответствии с предпочтениями пользователя?
Я разрабатываю схему сети в силовом макете 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
});
});
Мне нужна функциональность, при которой, когда пользователь вводит имя узла в поле фильтра, мне нужно удалить все другие узлы и ребра в графе и сохранить только этот конкретный узел и его непосредственно связанные узлы и ребра (один переход).
Пример:
Когда я набираю «Parent» в поле фильтра, он должен удалить все другие узлы и ребра и оставить только «Parent» узел и его прямые дочерние узлы (child1, child2, child3).
Каков жизнеспособный подход для фильтрации узлов и ребер, когда пользователь ищет определенные термины?
Заранее спасибо.