Commit be9cb353 authored by numeroteca's avatar numeroteca

add forced directed network graph

parent 29c0b0a4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Mestura Puerto. Enredómetro</title>
<!-- based in https://bl.ocks.org/mbostock/2949937
Manul: https://d3-wiki.readthedocs.io/zh_CN/master/Force-Layout/
Tips: http://www.d3noob.org/2013/03/d3js-force-directed-graph-example-basic.html -->
<meta charset="utf-8">
<style>
.link {
stroke: #aaa;
pointer-events: none;
}
.node {
stroke: #fff;
}
.node:hover{
stroke:pink;
fill:pink;
}
.label {
font: 300 9px "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #555555;
}
.node--source {
/*fill: #2ca02c;*/
fill: blue;
}
.node--target {
/*fill: #d62728;*/
fill: red;
}
.link--source,
.link--target {
stroke-opacity: 1;
stroke-width: 2px;
}
.link--source {
/*stroke: #d62728;*/
stroke: red;
}
.link--target {
/*stroke: #2ca02c;*/
stroke: blue;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 750;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var force = d3.layout.force()
.charge(-600)
.linkStrength(0.4)
.friction(0.9)
//.linkDistance(45)
.gravity(0.05)
.size([width, height]);
d3.csv("data/mestura.enredometro.csv", function(error, links) {
if (error) throw error;
var nodesByName = {};
// Create nodes for each unique source and target.
links.forEach(function(link) {
link.source = nodeByName(link.name);
link.target = nodeByName(link.imports);
});
// Extract the array of nodes from the map by name.
var nodes = d3.values(nodesByName);
//console.log(nodes);
// Create the link lines.
var link = svg.selectAll(".link")
.data(links)
.enter().append("line")
.attr("class", "link")
.attr("marker-end", "url(#triangle)");
svg.append("svg:defs").append("svg:marker")
.attr("id", "triangle")
.attr("refX", 6)
.attr("refY", 6)
.attr("markerWidth", 30)
.attr("markerHeight", 30)
.attr("orient", "auto")
.append("path")
.attr("d", "M 0 0 12 6 0 12 3 6")
.style("fill", "#aaaaaa");
// Create the node circles.
var gnodes = svg.selectAll(".node")
.data(nodes)
.enter()
.append('g')
.classed('gnode', true);
var node = gnodes.append("circle")
.attr("class", "node")
.attr("title",function(d) { return d.name; })
.attr("r", 4)
.on("mouseover", mouseovered)
.on("mouseout", mouseouted)
.call(force.drag);
// Append the labels to each group
var labels = gnodes.append("text")
//.attr("font-size","0.5em")
.attr("class", "label")
//.attr("dy", ".35em")
.text(function(d) { return d.name; });
// Start the force layout.
force
.nodes(nodes)
.links(links)
.on("tick", tick)
.start();
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("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
labels.attr("x", function(d) { return d.x + 6; })
.attr("y", function(d) { return d.y; });
}
function nodeByName(name) {
return nodesByName[name] || (nodesByName[name] = {name: name});
}
// Hightlights whe nhover related links
function mouseovered(d) {
node
.each(function(n) { n.target = n.source = false; });
link
.classed("link--target", function(l) { if (l.target === d) return l.source.source = true; })
.classed("link--source", function(l) { if (l.source === d) return l.target.target = true; })
.filter(function(l) { return l.target === d || l.source === d; })
.raise();
node
.classed("node--target", function(n) { return n.target; })
.classed("node--source", function(n) { return n.source; });
}
function mouseouted(d) {
link
.classed("link--target", false)
.classed("link--source", false);
node
.classed("node--target", false)
.classed("node--source", false);
}
});
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment