Filtering nodes and its corresponding edges in D3js using javascript

1
votes

I am trying to create a fixed graph in D3js. The nodes and the links are given below. Its an undirected graph. MY goal is to display all nodes of the same age. The links displayed should be between these nodes only . for example if I click a checkbox to display all nodes of age 23 then the nodes displayed should be:

  • Chris(1),
  • tina(2),
  • Mary(5),
  • ronaldo(6),
  • cs(9)

The links displayed should be

  1. {'source': 7, 'target': 1, 'value': '1'},
  2. {'source': 9, 'target': 1, 'value': '1'},
  3. {'source': 5, 'target': 8, 'value': '1'},
  4. {'source': 5, 'target': 2, 'value': '1'},
  5. {'source': 2, 'target': 1, 'value': '1'},
  6. {'source': 5, 'target': 1, 'value': '1'},
  7. {'source': 5, 'target': 6, 'value': '1'},
  8. {'source': 5, 'target': 9, 'value': '1'},
  9. {'source': 5, 'target': 4, 'value': '1'},

Here the number against source and target are the count of the node that is chris is assigned as 1 , tina as 2 and so on. The number is done based on the order it appears in the nodes list.

Data = 

{nodes: [{‘name’: ‘chris’ , ‘age’: 23 , ‘group’: 0}, {‘name’: ‘tina’ , ‘age’: 23 , ‘group’: 1},{‘name’: ‘shawn’ , ‘age’: 29 , ‘group’: 0}, {‘name’: ‘alex’ , ‘age’: 25 , ‘group’: 0} , {‘name’: ‘Mary’ , ‘age’: 23 , ‘group’: 0}, {‘name’: ‘ronaldo’ , ‘age’: 23 , ‘group’: 0}, {‘name’: ‘kaka’ , ‘age’: 25 , ‘group’: 0}, {‘name’: ‘cent’ , ‘age’: 25 , ‘group’: 0}, {‘name’: ‘cs’ , ‘age’: 23 , ‘group’: 4}],
links: [{'source': 7, 'target': 1, 'value': '1'}, {'source': 9, 'target': 1, 'value': '1'}, {'source': 5, 'target': 8, 'value': '1'},{'source': 3, 'target': 7, 'value': '1'} {'source': 5, 'target': 2, 'value': '1'}, {'source': 2, 'target': 1, 'value': '1'},{'source': 3, 'target': 4, 'value': '1'}, {'source': 8, 'target': 1, 'value': '7'}
{'source': 5, 'target': 1, 'value': '1'}, {'source': 5, 'target': 6, 'value': '1'}, {'source': 5, 'target': 9, 'value': '1'}, {'source': 5, 'target': 4, 'value': '1'}, {'source': 7, 'target': 4, 'value': '1'}]}

While searching I came across code to reduce the opacity of the other nodes, but that's not what I am looking for.

I want the nodes and the edges that don't fulfil the criteria to disappear.

Another similar question is : How to approach filtering nodes and edges rendered via d3.js according to user preference? They have taken an example of 3 nodes only and statically written which nodes to display. I have to take a user Input and filter out accordingly.

2
javascriptd3.js

2 Answers

0
votes

You can use the exit() and enter() methods to update your Graph dynamically. You must bind the data to the graph.

Here is a simple example:

let age = 23
var bars = d3.selectAll(".bar")
.data(nodes.filter((d)=> d.age == age), function(d){return d.name})

bars.exit().remove()
bars.enter().append("rect")
            .attr("class", "bar")
            .attr("x", ...)
            .attr("y", ...)
0
votes

To filter nodes based on age = 23 critera, you can use

var gnodes = svg.selectAll('g.gnode')

    .data(graph.nodes.filter((d)=> d.age == '23', function(d){return d.name}))

    gnodes.exit().remove()
    gnodes.enter()
    .append('g')
    .classed('gnode', true);

and for the links, you only want to keep those links that have both source and destination as nodes of age 23, so for that 

  var link = svg.selectAll(".link")

  .data(graph.links.filter((d) => (d.target.age == "23" && d.source.age == "23" ), function(d){return d.source}))
    .enter().append("line")

    .attr("class", "link");

You can use console.log(graph.links) to get a better idea of the underlying data structure and doing so will make such debugging much easier.