Stuck at the following output
In the output shown each node is named like this [city, state] and randomly placed.
I was wondering if there is a way to pull cities with same states nearer or closer to each other with respect to other states.
Link to the data array (links): http://pastebin.com/rrYkv7HN
code till now:
var nodes = {};
// Compute the distinct nodes from the links.
links.forEach(function(link) {
link.source = nodes[link.source] || (nodes[link.source] = {name:link.source+", "+link.cstate});
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target+", "+link.sstate});
});
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([w, h])
.linkDistance(200)
.charge(-300)
.on("tick", tick)
.start();
var g3 = d3.select("#graph").append("svg")
.attr("width", w)
.attr("height", h);
var link = g3.selectAll(".link")
.data(force.links())
.enter().append("line")
.attr("class", "link");
var node = g3.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("circle")
.style("fill", "red")
.attr("r", 8);
node.append("text")
.attr("x", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
function tick() {
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 + ")"; });
}
You can update the distance as per the node's state.
.linkDistance(function(d){
if(d.cstate == d.sstate)
return 80;//similar state will be close
else
return 200;//non similar state will be far
})
working example here
You can give the nodes a group property and then use that data to put them together inside a path.
Take a look at this example:
http://bl.ocks.org/GerHobbelt/3071239
When you click on the bigger nodes, it will expand into smaller nodes with the same group clustered inside a path.
Related
I have an example of force directed graph. And i want to show arrowheads, but no matter what i tried i can't see them.
Here is my javascript
var nodes = {};
// Compute the distinct nodes from the links.
links.forEach(function(link) {
link.source = nodes[link.source] || (nodes[link.source] = {
name: link.source
});
link.target = nodes[link.target] || (nodes[link.target] = {
name: link.target
});
});
var width = 960,
height = 500;
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(100)
.charge(-300)
.on("tick", tick)
.start();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("svg:defs").selectAll("marker")
.data(["arrow"])
.enter().append("svg:marker")
.attr("id", "arrow")
.attr("viewBox","0 0 10 10")
.attr("refX","20")
.attr("refY","5")
.attr("markerUnits","strokeWidth")
.attr("markerWidth","9")
.attr("markerHeight","5")
.attr("orient","auto")
.append("svg:path")
.attr("d","M 0 0 L 10 5 L 0 10 z")
.attr("fill", "#f0f0f0");
var link = svg.append("svg:g").selectAll("line")
.data(force.links())
.enter().append("svg:line")
.attr("class", "link")
.attr("marker-mid", "url(#arrow)");
var node = svg.append("svg:g").selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("circle")
.attr("r", 8);
node.append("text")
.attr("x", -22)
.text(function(d) {
return d.name;
});
function tick() {
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.attr("marker-mid", "url(#arrow)");
node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
}
And here is my jsfiddle
From the MDN docu on marker-mid:
The marker-mid defines the arrowhead or polymarker that shall be drawn at every vertex other than the first and last vertex of the given element or basic shape.
So the marker will be inserted at every vertex, but the start and end.
A simple line segment, however, has no other vertices, but its start and end. Thus there are no markers shown in your code.
If you change your marker-mid to, e.g., marker-end, you will see the arrow heads (although right now, they are not that pretty): fiddle.
Another way, would be to change the line-elements to path elements and add a additional vertex in the mid. This, however, would require some more sufficient code.
Does anybody have an idea of how to maintain constant link distances while at the same time repulsing nodes?
Here's an example of the problem (this is the standard FDG example, but with fewer nodes).
var graph = {
"nodes":[
{"name":"a","group":1},
{"name":"a","group":1},
{"name":"a","group":1},
{"name":"a","group":1},
{"name":"b","group":8}
],
"links":[
{"source":1,"target":0,"value":1},
{"source":2,"target":0,"value":1},
{"source":3,"target":0,"value":1},
{"source":4,"target":0,"value":1}
]
};
var width = 300,
height = 300;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var drawGraph = function(graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var gnodes = svg.selectAll('g.gnode')
.data(graph.nodes)
.enter()
.append('g')
.classed('gnode', true)
.call(force.drag);
var node = gnodes.append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) { return color(d.group); });
node.append("title")
.text(function(d) { return d.name; });
var labels = gnodes.append("text")
.text(function(d) { return d.name; })
.attr('text-anchor', 'middle')
.attr('font-size', 8.0)
.attr('font-weight', 'bold')
.attr('y', 2.5)
.attr('fill', d3.rgb(50,50,50))
.attr('class', 'node-label')
.append("svg:title")
.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; })
.each(function(d) { console.log(Math.sqrt((d.source.x - d.target.x) * (d.source.x - d.target.x) + (d.source.y - d.target.y) * (d.source.y - d.target.y))); });
gnodes.attr("transform", function(d) {
return 'translate(' + [d.x, d.y] + ')';
});
});
};
drawGraph(graph);
http://jsfiddle.net/pkerpedjiev/vs3foo80/1/
There's one central node and four attached nodes. The links should all have a length of 30, but because of the repulsion forces, they settle down to lengths of 35. Is there a way to counteract that and make the link lengths to converge to their desired values of 30 while maintaining the repulsion between non-connected nodes?
This would be akin to making the link force much stronger than the repulsion force. Increasing that, however, leads to very unstable behaviour.
Another way of putting this question is, is there a way to spread the nodes as far apart from each other while maintaining the desired link lengths?
Yes, use .chargeDistance(30). The .chargeDistance() setting determines the maximum distance when charge is applied, and is infinite by default. A setting of 30 set your charge to only apply to nodes that are within 30px, and should give you the behavior you want.
The drawback of this is that on a large graph, you will no longer see add-on effects that unfold the graph faster and the layout will have a more localized appearance. To achieve something like that, I would suggest experimenting with a dynamic chargeDistance tied to the alpha parameter of the force algorithm (the cooldown) so that it starts at infinite and then moves toward 30 (or whatever) as the graph cools down.
I will try to make a resume of my problem and give some additional information if someone have a lead for me.
I want to display the history of an element in an application. How it have been construct and what it have done. So it could have 1+ parents, 1+ brothers and 1+ children. It's like a genealogy tree but it could have 3 parents and parents and children can be mixed to give others children. So I thought about a network, and I ended with this :
http://jsfiddle.net/ggrwc8p6/3/
var data = {
"nodes":[
{"name":"1-STS","group":1},
{"name":"2-STS","group":1},
{"name":"1-ADN","group":2},
{"name":"2-ADN","group":2},
{"name":"3-ADN","group":2},
{"name":"4-ADN","group":2}
],
"links":[
{"source":0,"target":2,"value":1},
{"source":1,"target":2,"value":1},
{"source":2,"target":3,"value":5},
{"source":3,"target":4,"value":5},
{"source":3,"target":5,"value":5}
]
};
var width = 500,
height = 500;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(120)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
function makeIt(error, graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", function(d) { return "node " + d.group; })
.attr("r", 15)
.style("fill", function(d) { return color(d.group); })
.call(force.drag);
node.append("title")
.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("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
}
makeIt("",data);
My problem here are :
How can I make this like a tree ? From top to bottom and not with no hierarchy like here ?
How can I put some text in dot (title) and lines ?
Thank for the people that will help me.
++
I'm using the amazing D3JS to build a graph. The graph is rendered, but I want my nodes to have each one its size.
The data is of this form :
{source: "Antony Hoppkins", target: "Woody Allen", value: 3}
Here's the code :
var links = graph.links;
var nodes = {};
links.forEach(function(link) {
link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});
var width = 1200,
height = 1500;
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(50)
.charge(-200)
.on("tick", tick)
.start();
var svg = d3.select("#network").append("svg")
.attr("width", width)
.attr("height", height);
var link = svg.selectAll(".link")
.data(force.links())
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.style("stroke-width", function(d) { return (d.value)*5; })
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.call(force.drag);
node.append("circle")
.attr("r", 5);
node.append("text")
.attr("x", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
function tick() {
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 mouseover() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 10)
;
}
function mouseout() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 5)
;
}
Any thoughts ?
I'm assuming that you want to set the size of each node (i.e. radius) according to .value. You do this like this:
node.append("circle")
.attr("r", function(d) { return d.value * 3; });
You can obviously adjust the factor, or use a scale instead.
I'm searching for this too and tried to workaround it a little bit.
I think that every object in your db has to be a unique id (or just iterate through). Then in your code at node object you could write something like this:
var node = svg.selectAll(".node")
.data(graph.nodes)
.attr("r", function(d){
if (d.value === myUniqueId){
return 3;
} else {
return 10;
}
})
here the "r" is for the radious.The value is a name in my db (it can be anything you want). There you can change the nodes sizes.
I know it is not a clean code but I'm just a newbie.
Hope it helps!
I have some data I am trying to display with the D3 force layout. Apologies if this is a naive question, or if the terminology i employ in the question title is not accurate. I couldn't see an answer quite what i was looking for.
I made a fiddle with a sample showing what I am on about here :
http://jsfiddle.net/stevendwood/f3GJT/8/
In the example I have one node (0) which has lots of links. Another node (16) has a smaller amount of links, 0 and 16 are both connected to 15.
So what i would like is for 0 and 16 to be little clusters with their connected nodes appearing in a nice circle around them.
I vainly tried to customise the charge based on the number of links, but I think what i want to do is somehow make nodes more attracted to nodes they are connected to and less attracted to nodes that they are not connected to.
I would like something like this if possible :
var w = 500,
h = 500,
nodes = [],
links = [];
/* Fake up some data */
for (var i=0; i<20; i++) {
nodes.push({
name: ""+i
});
}
for (i=0; i<16; i++) {
links.push({
source: nodes[i],
target: nodes[0]
});
}
links.push({
source: nodes[16],
target: nodes[15]
});
for (i=17; i<20; i++) {
links.push({
source: nodes[i],
target: nodes[16]
});
}
var countLinks = function(n) {
var count = 0;
links.forEach(function(l) {
if (l.source === n || l.target === n) {
count++;
}
});
return count;
}
/////////////////////////////////////////////
var vis = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h);
var force = d3.layout.force()
.nodes(nodes)
.links([])
.gravity(0.05)
.charge(function(d) {
return countLinks(d) * -50;
})
.linkDistance(300)
.size([w, h]);
var link = vis.selectAll(".link")
.data(links)
.enter().append("line")
.attr("class", "link")
.attr("stroke", "#CCC")
.attr("fill", "none");
var node = vis.selectAll("circle.node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("svg:circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", 14)
.style("fill", "#CCC")
.style("stroke", "#AAA")
.style("stroke-width", 1.5)
node.append("text").text(function(d) { return d.name; })
.attr("x", -6)
.attr("y", 6);
force.on("tick", function(e) {
node.attr("transform", function(d, i) {
return "translate(" + d.x + "," + d.y + ")";
});
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; })
});
force.start();
Why did you leave out the links when declaring the force layout? If you add them back in, it looks much closer to what you wanted:
var force = d3.layout.force()
.nodes(nodes)
//.links([])
.links(links)
.gravity(0.1)
.charge(-400)
.linkDistance(75)
.size([w, h]);
http://jsfiddle.net/f3GJT/11/