Requirement is to filter the nodes and links based on the Button click event. Initial loading process works fine, but button click rendering process is failing.
Created a separate method for rendering process. Initial data is loaded in Json file (data.json).
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.link {
stroke: #B8B0B4;
}
</style>
<body>
<div style="font-size:12px;font-family:Comic Sans MS"><input type="Button" value="1958" onclick="Update_Node()"></input></div></center>
<script>
var width = 800,
height = 700,
radius = 6;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-240)
.gravity(7)
.linkDistance(30)
.size([width, height]);
var svg = d3.select("div.graph").append("svg")
.attr("width", width)
.attr("height", height);
var edges = [];
var nodes = [];
var Updatededges = [];
var Updatednodes = [];
function Update_Node()
{
console.log("Inside");
edges=[];
nodes.forEach(function(e) {
if(e.PersonId > 1000)
Updatednodes.push(e)
});
console.log(Updatednodes.length);
force.stop()
render(nodes,edges)
force
.nodes(nodes)
.links(edges)
.start();
}
d3.json("data.json", function(error, graph) {
if (error) throw error;
graph.links.forEach(function(e) {
var sourceNode = graph.nodes.filter(function(n) { return n.PersonId === e.source; })[0],
targetNode = graph.nodes.filter(function(n) { return n.PersonId === e.target; })[0];
edges.push({source: sourceNode, target: targetNode, weight : e.weight});
});
nodes = graph.nodes;
console.log(nodes.length);
force.stop()
render(graph.nodes,edges)
force
.nodes(graph.nodes)
.links(edges)
.start();
});
function render(nodelist,links) {
var link = svg.selectAll(".link")
.data(links)
.enter().append("line")
.attr("class", "link")
.style("stroke-opacity", 0.5)
.style("stroke-width", function(d) { return 1})
var node = svg.selectAll("g.node")
.data(nodelist)
.enter().append("g")
.classed('node', true);
node.append("circle")
.attr("class", "node")
.attr("r", function(d) { return d.Weight; })
.style("fill", "#889CB0")
.style("stroke", "#382E44")
.style("stroke-width", 0.05)
.call(force.drag);
node.append("title")
.text(function(d) { return d.Forename+" "+d.Surname+" ("+d.Weight+")"; });
node.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.style("font-weight", "bold")
.style("fill", d3.rgb(29,23,23))
.style("fill", d3.rgb(29,23,23))
.text(function(d) { return d.Name})
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("transform", function(d) {
return 'translate(' + [d.x, d.y] + ')';
});
});
}
</script>
</body>
...
No luck Curran., Still not getting the text. Also edges are rendering on top of the node. How to avoid that situation?
Webpage has two buttons - 1964 and 1965 (ON/OFF buttons). If you click"1964" twice, edges will render on top of the node. (PFB screenshot)
Uploaded my code here.