|
@@ -0,0 +1,211 @@
|
|
|
+// TODO
|
|
|
+// - window size
|
|
|
+// - avoid sidebar
|
|
|
+// - pan to node
|
|
|
+// - pan and zoom to link
|
|
|
+define(["d3"], function (d3) {
|
|
|
+ return function (linkScale, sidebar, router) {
|
|
|
+ var self = this
|
|
|
+ var vis, link, node, label
|
|
|
+ var nodesDict, linksDict
|
|
|
+ var force
|
|
|
+
|
|
|
+ function nodeName(d) {
|
|
|
+ if (d.node && d.node.nodeinfo)
|
|
|
+ return d.node.nodeinfo.hostname
|
|
|
+ else
|
|
|
+ return d.id
|
|
|
+ }
|
|
|
+
|
|
|
+ function dragstart(d) {
|
|
|
+ d3.event.sourceEvent.stopPropagation()
|
|
|
+ d.fixed |= 2
|
|
|
+ }
|
|
|
+
|
|
|
+ function dragmove(d) {
|
|
|
+ d.px = d3.event.x
|
|
|
+ d.py = d3.event.y
|
|
|
+ force.resume()
|
|
|
+ }
|
|
|
+
|
|
|
+ function dragend(d) {
|
|
|
+ d3.event.sourceEvent.stopPropagation()
|
|
|
+ d.fixed &= 1
|
|
|
+ }
|
|
|
+
|
|
|
+ function panzoom() {
|
|
|
+ vis.attr("transform",
|
|
|
+ "translate(" + d3.event.translate + ") "
|
|
|
+ + "scale(" + d3.event.scale + ")")
|
|
|
+ }
|
|
|
+
|
|
|
+ function tickEvent() {
|
|
|
+ link.selectAll("line")
|
|
|
+ .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 })
|
|
|
+
|
|
|
+ label.attr("transform", function(d) {
|
|
|
+ return "translate(" + d.x + "," + d.y + ")"
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ var el = document.createElement("div")
|
|
|
+ el.classList.add("graph")
|
|
|
+ self.div = el
|
|
|
+
|
|
|
+ vis = d3.select(el).append("svg")
|
|
|
+ .attr("pointer-events", "all")
|
|
|
+ .call(d3.behavior.zoom().on("zoom", panzoom))
|
|
|
+ .append("g")
|
|
|
+
|
|
|
+ vis.append("g").attr("class", "links")
|
|
|
+ vis.append("g").attr("class", "nodes")
|
|
|
+ vis.append("g").attr("class", "labels").attr("pointer-events", "none")
|
|
|
+
|
|
|
+ force = d3.layout.force()
|
|
|
+ .size([500, 500])
|
|
|
+ .charge(-100)
|
|
|
+ .gravity(0.05)
|
|
|
+ .friction(0.73)
|
|
|
+ .theta(0.8)
|
|
|
+ .linkDistance(70)
|
|
|
+ .linkStrength(0.2)
|
|
|
+ .on("tick", tickEvent)
|
|
|
+
|
|
|
+ var draggableNode = d3.behavior.drag()
|
|
|
+ .on("dragstart", dragstart)
|
|
|
+ .on("drag", dragmove)
|
|
|
+ .on("dragend", dragend)
|
|
|
+
|
|
|
+ self.setData = function (data) {
|
|
|
+ var links = data.graph.links.filter( function (d) {
|
|
|
+ return !d.vpn
|
|
|
+ })
|
|
|
+
|
|
|
+ link = vis.select("g.links")
|
|
|
+ .selectAll("g.link")
|
|
|
+ .data(links, linkId)
|
|
|
+
|
|
|
+ var linkEnter = link.enter().append("g")
|
|
|
+ .attr("class", "link")
|
|
|
+ .on("click", function (d) {
|
|
|
+ if (!d3.event.defaultPrevented)
|
|
|
+ router.link(d)()
|
|
|
+ })
|
|
|
+
|
|
|
+ linkEnter.append("line")
|
|
|
+ .append("title")
|
|
|
+
|
|
|
+ link.selectAll("line")
|
|
|
+ .style("stroke", function (d) { return linkScale(d.tq) })
|
|
|
+
|
|
|
+ link.selectAll("title").text(showTq)
|
|
|
+
|
|
|
+ linksDict = {}
|
|
|
+
|
|
|
+ link.each( function (d) {
|
|
|
+ if (d.source.node && d.target.node)
|
|
|
+ linksDict[linkId(d)] = this
|
|
|
+ })
|
|
|
+
|
|
|
+ var nodes = data.graph.nodes
|
|
|
+
|
|
|
+ node = vis.select("g.nodes")
|
|
|
+ .selectAll(".node")
|
|
|
+ .data(nodes,
|
|
|
+ function(d) {
|
|
|
+ return d.id
|
|
|
+ }
|
|
|
+ )
|
|
|
+
|
|
|
+ var nodeEnter = node.enter().append("circle")
|
|
|
+ .attr("r", 8)
|
|
|
+ .on("click", function (d) {
|
|
|
+ if (!d3.event.defaultPrevented)
|
|
|
+ router.node(d.node)()
|
|
|
+ })
|
|
|
+ .call(draggableNode)
|
|
|
+
|
|
|
+ node.attr("class", function (d) {
|
|
|
+ var s = ["node"]
|
|
|
+ if (!d.node)
|
|
|
+ s.push("unknown")
|
|
|
+
|
|
|
+ return s.join(" ")
|
|
|
+ })
|
|
|
+
|
|
|
+ nodesDict = {}
|
|
|
+
|
|
|
+ node.each( function (d) {
|
|
|
+ if (d.node)
|
|
|
+ nodesDict[d.node.nodeinfo.node_id] = this
|
|
|
+ })
|
|
|
+
|
|
|
+ label = vis.select("g.labels")
|
|
|
+ .selectAll("g.label")
|
|
|
+ .data(data.graph.nodes, function (d) {
|
|
|
+ return d.id
|
|
|
+ })
|
|
|
+
|
|
|
+ var labelEnter = label.enter()
|
|
|
+ .append("g")
|
|
|
+ .attr("class", "label")
|
|
|
+
|
|
|
+ labelEnter.append("path").attr("class", "clients")
|
|
|
+
|
|
|
+ labelEnter.append("text")
|
|
|
+ .attr("class", "name")
|
|
|
+ .attr("text-anchor", "middle")
|
|
|
+ .attr("y", "21px")
|
|
|
+ .attr("x", "0px")
|
|
|
+
|
|
|
+ label.selectAll("text.name").text(nodeName)
|
|
|
+
|
|
|
+ var labelTextWidth = function (e) {
|
|
|
+ return e.parentNode.querySelector("text").getBBox().width + 3
|
|
|
+ }
|
|
|
+
|
|
|
+ labelEnter.insert("rect", "text")
|
|
|
+ .attr("y", "10px")
|
|
|
+ .attr("x", function() { return labelTextWidth(this) / (-2)})
|
|
|
+ .attr("width", function() { return labelTextWidth(this)})
|
|
|
+ .attr("height", "15px")
|
|
|
+
|
|
|
+ nodeEnter.append("title")
|
|
|
+
|
|
|
+ node.selectAll("title").text(nodeName)
|
|
|
+
|
|
|
+ force.nodes(nodes)
|
|
|
+ .links(links)
|
|
|
+ .alpha(0.1)
|
|
|
+ .start()
|
|
|
+ }
|
|
|
+
|
|
|
+ self.resetView = function () {
|
|
|
+ node.classed("highlight", false)
|
|
|
+ link.classed("highlight", false)
|
|
|
+ }
|
|
|
+
|
|
|
+ self.gotoNode = function (d) {
|
|
|
+ link.classed("highlight", false)
|
|
|
+ node.classed("highlight", function (e) {
|
|
|
+ return e.node === d && d !== undefined
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ self.gotoLink = function (d) {
|
|
|
+ node.classed("highlight", false)
|
|
|
+ link.classed("highlight", function (e) {
|
|
|
+ return e === d && d !== undefined
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ return self
|
|
|
+ }
|
|
|
+})
|