Force Layout SVG test with D3 3.5
This network has 889 nodes & 1093 links.
Based on Force Directed Graph example.
This test uses Abogados del estado data from http://quienmanda.es/.
Built with blockbuilder.org
xxxxxxxxxx
<meta charset="utf-8">
<style>
.link {
stroke: #aaa;
stroke-width: 1px
}
.node {
pointer-events: all;
stroke: none;
stroke-width: 40px;
}
.label {
fill: #333;
font-size: 10px;
font-family: Arial, sans-serif;
}
</style>
<svg width="960" height="600"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
d3.json("data.json", function(error, graph) {
if (error) throw error;
console.dir(graph);
var nodes_map = d3.map();
graph.nodes.forEach(function(d,i){
nodes_map.set(d.id, i);
});
graph.links.forEach(function(d){
d.source = nodes_map.get(d.source_id);
d.target = nodes_map.get(d.target_id);
});
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.call(force.drag);
var label = svg.selectAll(".label")
.data(graph.nodes)
.enter().append("text")
.attr("class", "label")
.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; });
label
.attr("x", function(d) { return d.x+8; })
.attr("y", function(d) { return d.y+3; });
});
});
</script>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js