Как подходить к фильтрации узлов и ребер, отображаемых с помощью d3.js, в соответствии с предпочтениями пользователя?

Ссылка на мой код (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
    });
});

Мне нужна функциональность, при которой, когда пользователь вводит имя узла в поле фильтра, мне нужно удалить все другие узлы и ребра в графе и сохранить только этот конкретный узел и его непосредственно связанные узлы и ребра (один переход).

Пример:

Когда я набираю «Parent» в поле фильтра, он должен удалить все другие узлы и ребра и оставить только «Parent» узел и его прямые дочерние узлы (child1, child2, child3).

Каков жизнеспособный подход для фильтрации узлов и ребер, когда пользователь ищет определенные термины?

Заранее спасибо.

Ответы на вопрос(1)

Ваш ответ на вопрос