I'm a beginner in javascript/d3, and came across a great network visualization I wanted to play around with.
I am looking to make the visualization dynamic, by adding links and their associated nodes at specified times.
To get me started, I first tried to keep all nodes displayed and simply add the links as they appear in the data file.
Stripping down the original html file, here is my attempt (adding the iterateLink() function, and slightly tweaking initializeGraph() ):
function iterateLinks() {
for ( x = 0; x < zlinkz.length; x++ ) {
setTimeout( function() {
links.push(zlinkz[x]);
restart();
}, 2000);
}
}
function initializeGraph(newGraph) {
newNodes = [];
newLinks = [];
// We need a hash to fit the link structure of D3's force-directed layout
nodeHash = {};
zlinkz = [];
for ( x = 0; x < newGraph.nodes.length; x++ ) {
newNodes.push(newGraph.nodes[x]);
nodeHash[String(newGraph.nodes[x].id)] = x;
}
for ( x = 0; x < newGraph.links.length; x++ ) {
newLinks.push({id: x, source: newGraph.nodes[nodeHash[newGraph.links[x].source]], target: newGraph.nodes[nodeHash[newGraph.links[x].target]], "cost": newGraph.links[x].cost, "weight": newGraph.links[x].invcost });
}
force = d3.layout.force()
.size([width, height])
.nodes(newNodes) // initialize with a single node
.links(newLinks)
.linkDistance(60)
.charge(-60)
.on("tick", tick);
var svg = d3.select("#viz").append("svg")
.attr("width", width)
.attr("height", height)
.attr("id", "networkViz");
svg.append("rect")
.attr("width", width)
.attr("height", height)
.attr("id","backgroundRect")
.on("mousemove", mousemove);
nodes = force.nodes();
links = force.links();
node = svg.selectAll(".node");
link = svg.selectAll(".link");
arrowhead = svg.selectAll(".link");
cursor = svg.append("circle")
.attr("transform", "translate(-100,-100)")
.attr("class", "cursor")
.attr("r", 1)
.style("opacity", 0);
restart();
iterateLinks();
}
The complete code can be found on jsfiddle.
The function doesn't seem to iterate through the links despite my iterateLinks() function and doesn't display the links.
Do you know where I'm going wrong with the function, and how to solve it?
Any help is much appreciated!
Thanks.
===== EDIT =====
Thanks to @Barnab and @AmeliaBR's help, I made the changes here and also included the adding nodes dynamically too.