I have data representing nodes and links for a force directed graph. The links can have different numbers of connections between them, such as one, two, or three links:
{"nodes": [{"id": "Michael Scott", "type": "boss"}
,{"id": "Jim Halpert", "type": "employee"}
,{"id": "Pam Beasley", "type": "employee"}
,{"id": "Kevin Malone", "type": "employee"}
,{"id": "Angela", "type": "employee"}
,{"id": "Dwight Schrute", "type": "employee"}]
,"links": [{"source": "Michael Scott", "target": "Jim Halpert", "num": 1}
,{"source": "Pam Beasley", "target": "Kevin Malone", "num": 2}
,{"source": "Pam Beasley", "target": "Kevin Malone", "num": 2}
,{"source": "Angela", "target": "Dwight Schrute", "num": 3}
,{"source": "Angela", "target": "Dwight Schrute", "num": 3}
,{"source": "Angela", "target": "Dwight Schrute", "num": 3}]
}
There is a dropdown menu that will be used to filter the nodes and links displayed on the d3 force-directed graph based on the number of connections (num). I am currently working on the JavaScript code to achieve this filtering:
var dropdown = d3.select("#selectLinkNumber")
var change = function() {
d3.selectAll("svg > *").remove()
var val = dropdown.node().options[dropdown.node().selectedIndex].value;
d3.json("test.json", function(error, graph) {
var filteredLinks = graph.links.filter(d => d.num >= val);
//Need to map unique source and targets to id in nodes
var filteredNodes = graph.nodes.filter()//Need a way to map nodes with filteredLinks
});
var filteredGraph = {
nodes: filteredNodes,
links: filteredLinks
};
//do stuff
})
}
dropdown.on("change", change)
change();
I am seeking guidance on how to complete the JavaScript array manipulation code to filter out links based on num, and also remove the corresponding nodes.