ffmap-backend/html/force.js

244 lines
6.5 KiB
JavaScript
Raw Normal View History

2012-05-12 17:06:00 +02:00
function getOffset( el ) {
2012-06-03 18:57:36 +02:00
var _x = 0;
var _y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
_x += el.offsetLeft - el.scrollLeft;
_y += el.offsetTop - el.scrollTop;
el = el.offsetParent;
}
return { top: _y, left: _x };
2012-05-12 17:06:00 +02:00
}
var offset = getOffset(document.getElementById('chart'));
var w = window.innerWidth - offset.left,
h = window.innerHeight - offset.top,
2012-02-17 02:09:21 +01:00
fill = d3.scale.category20();
2012-06-03 18:57:36 +02:00
var cp = d3.select("#chart").append("div")
.attr("id", "controlpanel");
var btns = cp.append("div")
.attr("class", "btn-group")
.attr("data-toggle", "buttons-radio");
btns.append("button")
.attr("class", "btn active left")
.attr("value", "all")
2012-06-03 21:56:45 +02:00
.text("Alles")
2012-06-03 18:57:36 +02:00
.on("click", update_graph);
btns.append("button")
.attr("class", "btn right")
.attr("value", "mesh")
2012-06-03 21:56:45 +02:00
.text("nur Mesh")
2012-06-03 18:57:36 +02:00
.on("click", update_graph);
2012-06-04 18:23:39 +02:00
cp.append("label")
.text("Knoten hervorheben:");
cp.append("br");
cp.append("input")
.on("keyup", function(){show_node(this.value)})
.on("change", function(){show_node(this.value)});
function show_node(mac) {
d3.selectAll("#chart .node").classed("marked", false);
2012-06-04 18:27:57 +02:00
if (mac.length == 0)
return;
2012-06-04 18:23:39 +02:00
d3.selectAll("#chart .node").each( function(d) {
if (d.id == mac)
d3.select(this).classed("marked", true);
})
}
var hashstr = window.location.hash.substring(1);
2012-06-03 18:57:36 +02:00
function update_graph() {
var value = jQuery(this).val()
render_graph(value);
}
render_graph("all");
function render_graph(type) {
d3.select("#chart svg").remove();
var vis = d3.select("#chart").append("svg")
2012-02-17 02:09:21 +01:00
.attr("width", w)
.attr("height", h);
2012-06-03 18:57:36 +02:00
d3.json("nodes.json", function(json) {
var force = d3.layout.force()
.charge(-100)
.gravity(0.02)
.friction(0.75)
.theta(0.1)
.linkDistance(function (d) { return d.distance; })
.linkStrength(function (d) { return d.strength; })
.nodes(json.nodes)
.links(json.links)
.size([w, h])
.start();
  var linkedByIndex = {};
  json.links.forEach(function(d) {
      linkedByIndex[d.source.index + "," + d.target.index] = 1;
  });
2012-06-03 21:08:48 +02:00
  json.links.forEach(function(d) {
var node, other;
if (d.source.group == 2) {
node = d.target;
other = d.source;
}
if (d.target.group == 2) {
node = d.source;
other = d.target;
}
if (node) {
if (node.uplinks === undefined)
node.uplinks = new Array();
node.uplinks.push(other);
}
  });
2012-06-03 18:57:36 +02:00
var linkdata = json.links;
if (type == "mesh")
linkdata = json.links.filter( function (d) {
return d.source.group != 2 && d.target.group != 2 &&
d.source.group != 3 && d.target.group != 3;
});
2012-06-03 14:05:44 +02:00
2012-02-17 02:09:21 +01:00
var link = vis.selectAll("line.link")
2012-06-03 18:57:36 +02:00
.data(linkdata)
2012-02-17 02:09:21 +01:00
.enter().append("line")
2012-06-03 18:57:36 +02:00
.attr("class", "link")
.style("stroke-width", function(d) { return Math.min(1, d.strength * 2); })
.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; });
2012-02-17 02:09:21 +01:00
2012-06-03 18:57:36 +02:00
    function isConnected(a, b) {
        return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index;
    }
2012-06-03 14:05:44 +02:00
 function fade(opacity) {
        return function(d) {
            node.style("stroke-opacity", function(o) {
2012-06-03 18:57:36 +02:00
var connected = isConnected(d, o);
2012-06-03 15:28:34 +02:00
2012-06-03 18:57:36 +02:00
if (connected && opacity != 1)
d3.select(this).classed("highlight", true);
else
d3.select(this).classed("highlight", false);
2012-06-03 15:28:34 +02:00
2012-06-03 18:57:36 +02:00
                thisOpacity = connected ? 1 : opacity;
                this.setAttribute('fill-opacity', thisOpacity);
                return thisOpacity;
            });
2012-06-03 14:05:44 +02:00
            link.style("stroke-opacity", function(o) {
                return o.source === d || o.target === d ? 1 : opacity;
            });
        };
    }
2012-06-03 18:57:36 +02:00
2012-06-03 17:17:48 +02:00
function show_node_info(d) {
if (!(typeof nodeinfo === 'undefined'))
nodeinfo.remove();
nodeinfo = d3.select("#chart").append("div")
2012-06-03 18:57:36 +02:00
.attr("id", "nodeinfo");
2012-06-03 17:17:48 +02:00
nodeinfo.append("h1")
.text(d.name);
nodeinfo.append("p")
2012-06-04 17:53:53 +02:00
.text("primary: " + d.id);
nodeinfo.append("p")
.text("macs: " + d.macs);
2012-06-03 17:17:48 +02:00
nodeinfo.append("p")
.text(d.gps);
}
2012-06-03 14:05:44 +02:00
2012-02-17 02:09:21 +01:00
var node = vis.selectAll("svg.node")
2012-06-03 18:57:36 +02:00
.data(json.nodes.filter(function (d) {
return type != "mesh" || (d.group != 2 && d.group != 3);
}))
.enter().append("g")
.attr("class", "node")
.on("mouseover", fade(.2))
.on("mouseout", fade(1))
.on("click", show_node_info)
.call(force.drag);
2012-02-17 02:09:21 +01:00
node.append("ellipse")
2012-06-03 18:57:36 +02:00
.attr("rx", function(d) { if (d.group == 3) return 4; else return Math.max(10, d.name.length * 5); })
.attr("ry", function(d) { if (d.group == 3) return 4; else return 10; })
.style("fill", function(d) { if (d.group == 3) return fill(d.group); else return ""; })
.style("stroke", function(d) { return fill(d.group); });
2012-02-17 02:09:21 +01:00
node.append("text")
2012-06-03 18:57:36 +02:00
.attr("text-anchor", "middle")
.attr("y", "4px")
.text(function(d) { if (d.group == 3) return ""; else return d.name; });
2012-02-17 02:09:21 +01:00
node.append("title")
2012-06-03 18:57:36 +02:00
.text(function(d) { return d.macs; });
if (type == "mesh") {
2012-06-03 19:05:48 +02:00
var uplink_info = node.filter(function (d) {
if (d.uplinks !== undefined)
return d.uplinks.length > 0;
else
return false;
})
.append("g");
2012-06-03 21:08:48 +02:00
uplink_info.append("path")
2012-06-03 18:57:36 +02:00
.attr("width", 16)
.attr("height", 16)
2012-06-03 21:08:48 +02:00
.attr("x", 0)
.attr("y", 0)
.attr("d","m -2.8850049,-13.182327 c 7.5369165,0.200772 12.1529864,-1.294922 12.3338513,-10.639456 l 2.2140476,1.018191 -3.3137621,-5.293097 -3.2945999,5.20893 2.4339957,-0.995747 c -0.4041883,5.76426 -1.1549641,10.561363 -10.3735326,10.701179 z")
.style("fill", "#333");
2012-06-03 18:57:36 +02:00
uplink_info.append("text")
.attr("text-anchor", "middle")
2012-06-03 21:08:48 +02:00
.attr("y", 3 - 20)
2012-06-03 19:05:48 +02:00
.text(function (d) {return d.uplinks.length});
2012-06-03 18:57:36 +02:00
}
2012-02-17 02:09:21 +01:00
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
2012-06-03 18:57:36 +02:00
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
2012-02-17 02:09:21 +01:00
2012-06-03 18:57:36 +02:00
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
2012-06-04 18:25:58 +02:00
if (hashstr.length != 0)
show_node(hashstr);
2012-02-17 02:09:21 +01:00
});
2012-06-04 18:23:39 +02:00
2012-06-03 18:57:36 +02:00
}