D3js json links search using 2 attributes - json

Question

so I have a page showing pathways between nodes with a json file like this:
{"nodes":[
{"name":"Node 1", "Number":"01", "x":"48.23", "y":"638.54", "Status":"starting"},
{"name":"Node 2", "Number":"02", "x":"129.05", "y":"658.49", "Status":"starting"},
{"name":"Node 3", "Number":"03", "x":"174", "y":"687.79", "Status":"starting"},
{"name":"Node 4", "Number":"04", "x":"169.96", "y":"626.92", "Status":"starting"},
{"name":"Node 5", "Number":"05", "x":"263.65", "y":"631.47", "Status":"starting"}
],
"links":[
{"source": 1, "target": 2, "value": 2},
{"source": 1, "target": 3, "value": 8},
{"source": 1, "target": 4, "value": 5},
{"source": 2, "target": 3, "value": 4},
{"source": 2, "target": 4, "value": 9}
]
}
At the moment I have it set up so that when ever I click on a node it shows all pathways to other nodes. What I want is another mode, where when I click on the node it only shows the pathway with the highest "value" attribute for that corresponding source value.
I have tried looking online for some d3js examples of something like this but haven't found anything and have no idea where to start.
atm I am using a d3.selectAll function to find all pathways for source 1 when i click on node 1 like this:
d3.selectAll(".from" + d.nodes[0].Number + ":not(.pathlabel)")
.transition()
.duration(10)
.style("stroke", "blue")
.style("display", "block")
.style("stroke-opacity", blueActive[d.nodes[0].Number])
;
My code is based on this example: http://bl.ocks.org/fhernand/9a9f93f2a6b0e83a9294
My code is on jsfiddle:
jsfiddle.net/jgs6d7fv
I just want to know how to search through my JSON file using d3.js to find a specific link based on the source and the value attributes.

Answer 1

I'm using the same example passed by you http://bl.ocks.org/fhernand/9a9f93f2a6b0e83a9294
This will get you all the list of link data from
d3.max(d3.selectAll(".from" + d.nodes[0].Number + ":not(.pathlabel)").data()
To get the maximum pass to a player you need to find the max pass from that is done like this
var from_max = d3.max(d3.selectAll(".from" + d.nodes[0].Number + ":not(.pathlabel)").data(), function (d) {
return (d.value);
});
To get the maximum pass to a player you need to find the max pass to that is done like this
//this will calculate the max for to
var to_max = d3.max(d3.selectAll(".to" + d.nodes[0].Number + ":not(.pathlabel)").data(), function (d) {
return (d.value);
});
Now you can display or hide the path on the basis of the max path thats done like this using the display css attribute:
d3.selectAll(".to" + d.nodes[0].Number + ":not(.pathlabel)")
.transition()
.duration(10)
.style("stroke", "orange")
.style("display", function (d) {
if (d.value == to_max) {
return "block"
} else {
return "none"
}
})
Working fiddle I have added comments here.