Skip to content

Instantly share code, notes, and snippets.

@ZoltanLajosKis
Created July 20, 2011 19:34
  • Star 0 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save ZoltanLajosKis/1095727 to your computer and use it in GitHub Desktop.
d3.js force-directed graph dynamic nodes problem
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js"></script>
<style type="text/css">
.link { stroke: #ccc; }
.nodetext { pointer-events: none; font: 10px sans-serif; }
</style>
</head>
<body>
<script type="text/javascript">
var w = 960,
h = 500
var nodes = [],
links = [];
var vis = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h);
var force = self.force = d3.layout.force()
.nodes(nodes)
.links(links)
.gravity(.05)
.distance(100)
.charge(-100)
.size([w, h]);
force.on("tick", function() {
var node = vis.selectAll("g.node")
.data(nodes, function(d) { return d.id;} )
var link = vis.selectAll("line.link")
.data(links, function(d) { return d.source.id + ',' + d.target.id})
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 + ")"; });
});
function recalc() {
var link = vis.selectAll("line.link")
.data(links, function(l) { return l.source.id + '-' + l.target.id; });
link.enter().append("svg:line")
.attr("class", "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; });
link.exit().remove();
var node = vis.selectAll("g.node")
.data(nodes, function(d) { return d.dpid;}).call(force.drag);
var nodeEnter = node.enter().append("svg:g")
.attr("class", "node")
.call(force.drag);
nodeEnter.append("svg:image")
.attr("class", "circle")
.attr("xlink:href", "https://d3nwyuy0nl342s.cloudfront.net/images/icons/public.png")
.attr("x", "-8px")
.attr("y", "-8px")
.attr("width", "16px")
.attr("height", "16px");
nodeEnter.append("svg:text")
.attr("class", "nodetext")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.id });
node.exit().remove();
force.start();
}
/* Scenario */
/* step 1: add three nodes and three links */
function step1() {
var nA = {id: 'aaa'};
var nB = {id: 'bbb'};
var nC = {id: 'ccc'};
nodes.push(nA);
nodes.push(nB);
nodes.push(nC);
var lAB = {source: nA, target: nB};
var lAC = {source: nA, target: nC};
var lBC = {source: nB, target: nC};
links.push(lAB );
links.push(lAC);
links.push(lBC);
recalc();
}
/* step 2: node B disappears with links */
function step2() {
nodes = nodes.filter(function(n) { return n.id !== 'bbb'; });
links = links.filter(function(l) { return (l.source.id !== 'bbb' && l.target.id !== 'bbb'); });
recalc();
}
/* step 3: node B reappears with links */
function step3() {
var nB = {id: 'bbb'};
nodes.push(nB);
/* find exiting nodes for links */
var nA = nodes.filter(function(n) { return n.id === 'aaa'; })[0];
var nC = nodes.filter(function(n) { return n.id === 'ccc'; })[0];
var lAB = {source: nA, target: nB};
var lBC = {source: nB, target: nC};
links.push(lAB);
links.push(lBC);
recalc();
}
window.setTimeout(step1, 2000);
window.setTimeout(step2, 4000);
window.setTimeout(step3, 6000);
force.start();
recalc();
</script>
</body>
</html>
@neilvarnas-zz
Copy link

Hi, I know this is years later but maybe lll be in luck and You'll still answer this.
Im trying to solve the following problem:

I have the following scenario (http://jsfiddle.net/yeQS2/143/), A simple diagram, which circles a various sizes from 1 to 10. And I have a slider which I would love to use to filter my nodes and redraw the links between the rest of them. For example if I slide or choose 5 I would like to filter out all circles and its connections, that has a diameter, say, less than 5 and most importantly redraw connecting the left ones (the ones that have the diameter 5 or more).

Honestly, I looked at a million examples how to do similar stuff but it just doesn't go through my thick head. Please help me out here, feel free to edit my fiddle and update the function filterDiagram()

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment