Como abordar nós de filtragem e arestas renderizados via d3.js de acordo com a preferência do usuário?

Link para o meu código (Plunker)

Estou desenvolvendo um diagrama de rede no layout de força do D3.js. para fins acadêmicos. Até agora, codifiquei um gráfico que exibe nós e arestas. Eu tenho uma caixa de texto de preenchimento automático no jquery onde o usuário pode inserir um nome de nó.

D3.js (apenas parte do código. Para obter o código completo, consulte o link do meu 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 (preenchimento automático)

$(function() {
    $( "#tags" ).autocomplete({
      source: nodesArray
    });
});

Quero uma funcionalidade em que, quando um usuário digitar um nome de nó na caixa de filtro, eu preciso remover todos os outros nós e arestas do gráfico e manter apenas esse nó específico e seus nós e arestas diretamente associados (um salto).

Exemplo:

Quando digito "Pai" na caixa de filtro, ele deve remover todos os outros nós e arestas e manter apenas o nó "Pai" e seus nós filhos diretos (filho1, filho2, filho3).

O que é uma abordagem viável para filtrar nós e arestas à medida que o usuário procura termos específicos?

Desde já, obrigado.

questionAnswers(1)

yourAnswerToTheQuestion