diff --git a/html/force.js b/html/force.js index e624311..6143c4e 100644 --- a/html/force.js +++ b/html/force.js @@ -18,6 +18,12 @@ var w = window.innerWidth - offset.left, var cp = d3.select("#chart").append("div") .attr("id", "controlpanel") +cp.append("button") + .attr("class", "btn") + .attr("value", "reload") + .text("Aktualisieren") + .on("click", reload) + var btns = cp.append("div") .attr("class", "btn-group") @@ -111,7 +117,7 @@ function update_graph() { jQuery(this).toggleClass("active") var value = jQuery(this).val() visible[value] = jQuery(this).hasClass("active") - update(data) + update() } var vis = d3.select("#chart").append("svg") @@ -179,43 +185,65 @@ var data var visible = {clients: true, vpn: true} -d3.json("nodes.json", function(json) { - data = json +function reload() { + d3.json("nodes.json", function(json) { - // start force-layout early as it will - // replace indexes to source and target - // in data.links with actual elements from - // nodes - force.nodes(data.nodes) - .links(data.links) - .start() + json.links.forEach( function(d) { + if (typeof d.source == "number") d.source = json.nodes[d.source]; + if (typeof d.target == "number") d.target = json.nodes[d.target]; + }) - data.links.forEach(function(d) { - var node, other + json.links.forEach(function(d) { + var node, other - if (d.source.group == 2) { - node = d.target; - other = d.source; - } + if (d.source.group == 2) { + node = d.target; + other = d.source; + } - if (d.target.group == 2) { - node = d.source; - other = d.target; - } + if (d.target.group == 2) { + node = d.source; + other = d.target; + } - if (node) { - if (node.uplinks === undefined) - node.uplinks = new Array(); + if (node) { + if (node.uplinks === undefined) + node.uplinks = new Array(); - node.uplinks.push(other); - } + node.uplinks.push(other); + } + }) + + // update existing nodes with new info + json.nodes.forEach(function(d, i) { + var n + force.nodes().forEach(function(x) {if (x.id == d.id) n = x}) + if (n) { + for (var key in d) + if (d.hasOwnProperty(key)) + n[key] = d[key] + + json.nodes[i] = n + } + }) + + json.links.forEach(function(d) { + var n + force.links().forEach(function(x) {if (x.id == d.id) n = x}) + if (n) { + d.source = n.source + d.target = n.target + } + }) + + data = json + + update() }) +} - update(data) -}) - -function update(src) { - var links = force.links(data.links +function update() { + var links = data.links .filter(function (d) { if (!visible.clients && (d.source.group == 3 || d.target.group == 3)) return false @@ -225,7 +253,6 @@ function update(src) { return true }) - ).links() var link = vis.select("g.links") .selectAll("g.link") @@ -237,11 +264,16 @@ function update(src) { .attr("class", "link") linkEnter.append("line") - .style("stroke-width", function(d) { - return Math.min(1, d.strength * 2) - }) - linkEnter.filter(function (d) { + link.selectAll("line") + .style("stroke-width", function(d) { + return Math.min(1, d.strength * 2) + }) + + link.selectAll("path.label") + .remove() + + link.filter(function (d) { return d.quality != "TT" && d.quality != "1.000" }) .append("path") @@ -256,8 +288,7 @@ function update(src) { link.exit().remove() - var nodes = force.nodes(data.nodes - .filter(function (d) { + var nodes = data.nodes.filter(function (d) { if (!visible.vpn && d.group == 2) return false @@ -268,8 +299,7 @@ function update(src) { return false return true - }) - ).nodes() + }) var node = vis.select("g.nodes") .selectAll("g.node") @@ -278,6 +308,7 @@ function update(src) { return d.id } ) + var nodeEnter = node.enter().append("g") .attr("class", "node") .on("mouseover", fade(.2)) @@ -286,6 +317,8 @@ function update(src) { .call(force.drag) nodeEnter.append("ellipse") + + node.selectAll("ellipse") .attr("rx", function(d) { if (d.group == 3) return 4 else return Math.max(10, d.name.length * 5) @@ -308,9 +341,13 @@ function update(src) { .append("text") .attr("text-anchor", "middle") .attr("y", "4px") - .text(function(d) { return d.name }) + + node.selectAll("text") + .text(function(d) { return d.name }) nodeEnter.append("title") + + node.selectAll("title") .text(function(d) { return d.macs }) if (!visible.vpn) { @@ -340,7 +377,9 @@ function update(src) { node.exit().remove() - force.start() + force.nodes(nodes) + .links(links) + .start() linkedByIndex = {} @@ -351,3 +390,5 @@ function update(src) { if (hashstr.length != 0) show_node(hashstr) } + +reload()