164 lines
3.5 KiB
JavaScript
164 lines
3.5 KiB
JavaScript
//
|
|
// node.js
|
|
// animation on the home page
|
|
//
|
|
|
|
var Serf = Serf || {};
|
|
|
|
(function () {
|
|
|
|
var width = 1400,
|
|
height = 490,
|
|
border = 50,
|
|
numberNodes = 128,
|
|
linkGroup = 0;
|
|
//nodeLinks = [];
|
|
|
|
var nodes = [];
|
|
for (i=0; i<numberNodes; i++) {
|
|
nodes.push({
|
|
x: Math.random() * (width - border) + (border / 2),
|
|
y: Math.random() * (height - border) + (border / 2),
|
|
});
|
|
}
|
|
|
|
var fill = d3.scale.category20();
|
|
|
|
var force = d3.layout.force()
|
|
.size([width, height])
|
|
.nodes(nodes)
|
|
.linkDistance(60)
|
|
.charge(-1)
|
|
.gravity(0.0004)
|
|
.on("tick", tick);
|
|
|
|
var svg = d3.select("#jumbotron").append("svg")
|
|
.attr('id', 'node-canvas')
|
|
.attr("width", width)
|
|
.attr("height", height)
|
|
|
|
//set left value after adding to dom
|
|
resize();
|
|
|
|
svg.append("rect")
|
|
.attr("width", width)
|
|
.attr("height", height);
|
|
|
|
var nodes = force.nodes(),
|
|
links = force.links(),
|
|
node = svg.selectAll(".node"),
|
|
link = svg.selectAll(".link");
|
|
|
|
var cursor = svg.append("circle")
|
|
.attr("r", 30)
|
|
.attr("transform", "translate(-100,-100)")
|
|
.attr("class", "cursor");
|
|
|
|
|
|
function createLink(index) {
|
|
var node = nodes[index];
|
|
var nodeSelected = svg.select("#id_" + node.index).classed("active linkgroup_"+ linkGroup, true);
|
|
|
|
var distMap = {};
|
|
var distances = [];
|
|
|
|
for (var i=0; i<nodes.length; i++) {
|
|
if (i == index) {
|
|
continue
|
|
}
|
|
|
|
var target = nodes[i];
|
|
var selected = svg.select("#id_" + i);
|
|
var dx = selected.attr('cx') - nodeSelected.attr('cx');
|
|
var dy = selected.attr('cy') - nodeSelected.attr('cy');
|
|
var dist = Math.sqrt(dx * dx + dy * dy)
|
|
|
|
if (dist in distMap) {
|
|
distMap[dist].push(target)
|
|
} else {
|
|
distMap[dist] = [target]
|
|
}
|
|
distances.push(dist)
|
|
}
|
|
|
|
distances.sort(d3.ascending);
|
|
for (i = 0; i < 3; i++) {
|
|
var dist = distances[i]
|
|
var target = distMap[dist].pop()
|
|
var link = {
|
|
source: node,
|
|
target: target
|
|
}
|
|
links.push(link);
|
|
}
|
|
|
|
restart();
|
|
}
|
|
|
|
|
|
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; });
|
|
}
|
|
|
|
|
|
function restart() {
|
|
|
|
node = node.data(nodes);
|
|
|
|
node.enter().insert("circle", ".cursor")
|
|
.attr("class", "node")
|
|
.attr("r", 12)
|
|
.attr("id", function (d, i) {
|
|
return ("id_" + i)
|
|
})
|
|
.call(force.drag);
|
|
|
|
link = link.data(links);
|
|
|
|
link.enter().insert("line", ".node")
|
|
.attr("class", "link active linkgroup_"+ linkGroup);
|
|
|
|
force.start();
|
|
|
|
resetLink(linkGroup);
|
|
linkGroup++;
|
|
}
|
|
|
|
function resetLink(num){
|
|
setTimeout(resetColors, 700, num)
|
|
}
|
|
|
|
function resetColors(num){
|
|
svg.selectAll(".linkgroup_"+ num).classed('active', false)
|
|
}
|
|
|
|
window.onresize = function(){
|
|
resize();
|
|
}
|
|
|
|
function resize() {
|
|
var nodeC = document.getElementById('node-canvas');
|
|
wW = window.innerWidth;
|
|
|
|
nodeC.style.left = ((wW - width) / 2 ) + 'px';
|
|
}
|
|
|
|
//kick things off
|
|
function init() {
|
|
restart();
|
|
for (i=0;i<numberNodes;i++) {
|
|
setTimeout(createLink, 700*i+1000, i);
|
|
}
|
|
}
|
|
|
|
Serf.Nodes = {};
|
|
Serf.Nodes.init = init;
|
|
|
|
})();
|