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.