|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
|
|
.link { |
|
fill: none; |
|
stroke: #666; |
|
stroke-width: 1.5px; |
|
} |
|
|
|
.link.active { |
|
stroke: green; |
|
} |
|
|
|
.link.disconnected { |
|
stroke-dasharray: 0,2 1; |
|
} |
|
|
|
circle { |
|
fill: #ccc; |
|
stroke: #333; |
|
stroke-width: 1.5px; |
|
} |
|
|
|
text { |
|
font: 10px sans-serif; |
|
pointer-events: none; |
|
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff; |
|
} |
|
|
|
</style> |
|
<body> |
|
<script src="http://d3js.org/d3.v3.min.js"></script> |
|
<script> |
|
var ws = new WebSocket('ws://localhost:8080/'); |
|
|
|
ws.onmessage = function(event) { |
|
data = event.data; |
|
console.log(data); |
|
var data = event.data.split(' '); |
|
var source = data[0]; |
|
var destinations = data[1].split(','); |
|
destinations.forEach(function(destination){ |
|
links.push({source: source, target: destination}) |
|
}) |
|
recompute_nodes(); |
|
console.log(links); |
|
}; |
|
|
|
var links = []; |
|
|
|
var nodes = {}; |
|
|
|
// Compute the distinct nodes from the links. |
|
var recompute_nodes = function(){ |
|
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(60) |
|
.charge(-300) |
|
.on("tick", tick) |
|
.start(); |
|
|
|
var svg = d3.select("body").append("svg") |
|
.attr("width", width) |
|
.attr("height", height); |
|
|
|
// Per-type markers, as they don't inherit styles. |
|
svg.append("defs").selectAll("marker") |
|
.data(["suit", "licensing", "resolved"]) |
|
.enter().append("marker") |
|
.attr("id", function(d) { return d; }) |
|
.attr("viewBox", "0 -5 10 10") |
|
.attr("refX", 15) |
|
.attr("refY", -1.5) |
|
.attr("markerWidth", 6) |
|
.attr("markerHeight", 6) |
|
.attr("orient", "auto") |
|
.append("path") |
|
.attr("d", "M0,-5L10,0L0,5"); |
|
|
|
var path = svg.append("g").selectAll("path") |
|
.data(force.links()) |
|
.enter().append("path") |
|
.attr("class", function(d) { return "link " + d.active; }) |
|
.attr("marker-end", function(d) { return "url(#" + d.active + ")"; }); |
|
|
|
var circle = svg.append("g").selectAll("circle") |
|
.data(force.nodes()) |
|
.enter().append("circle") |
|
.attr("r", 6) |
|
.call(force.drag); |
|
|
|
var text = svg.append("g").selectAll("text") |
|
.data(force.nodes()) |
|
.enter().append("text") |
|
.attr("x", 8) |
|
.attr("y", ".31em") |
|
.text(function(d) { return d.name; }); |
|
|
|
// Use elliptical arc path segments to doubly-encode directionality. |
|
function tick() { |
|
path.attr("d", linkArc); |
|
circle.attr("transform", transform); |
|
text.attr("transform", transform); |
|
} |
|
|
|
function linkArc(d) { |
|
var dx = d.target.x - d.source.x, |
|
dy = d.target.y - d.source.y, |
|
dr = Math.sqrt(dx * dx + dy * dy); |
|
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; |
|
} |
|
|
|
function transform(d) { |
|
return "translate(" + d.x + "," + d.y + ")"; |
|
} |
|
|
|
</script> |
