Link to my code (Plunker)
I am developing a network diagram in D3.js force layout for academic purpose. I have so far coded a graph which displays nodes and edges. I have an auto-complete text box in jquery where user can enter a node name.
D3.js (Only part of code. For complete code see my plunker link):
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 (Autocomplete)
$(function() {
$( "#tags" ).autocomplete({
source: nodesArray
});
});
I want a functionality where when a user enters a node name in the filter box, I need to remove all other nodes and edges in the graph and keep only that particular node and its directly associated nodes and edges (one hop).
Example:
When I type "Parent" in the filter box it has to remove all other nodes and edges and keep only "Parent" node and its direct child nodes (child1, child2, child3).
What is a viable approach for filtering nodes and edges as the user searches for particular terms?
Thanks in advance.