hopglass/lib/forcegraph.js

295 lines
7.3 KiB
JavaScript
Raw Normal View History

2015-03-31 17:22:36 +02:00
define(["d3"], function (d3) {
return function (linkScale, sidebar, router) {
var self = this
2015-04-01 00:06:17 +02:00
var nodes, links
2015-04-01 03:57:10 +02:00
var svg, vis, link, node
2015-03-31 17:22:36 +02:00
var nodesDict, linksDict
2015-03-31 21:18:06 +02:00
var zoomBehavior
2015-03-31 17:22:36 +02:00
var force
2015-03-31 21:31:06 +02:00
var el
var doAnimation = false
2015-03-31 17:22:36 +02:00
2015-04-01 00:06:17 +02:00
var LINK_DISTANCE = 70
2015-04-01 18:21:54 +02:00
function graphDiameter(nodes) {
return Math.sqrt(nodes.length / Math.PI) * LINK_DISTANCE
}
function savePositions() {
if (!localStorageTest())
return
var save = nodes.map( function (d) {
return { id: d.id, x: d.x, y: d.y }
})
localStorage.setItem("graph/nodeposition", JSON.stringify(save))
}
2015-03-31 17:22:36 +02:00
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
}
2015-03-31 21:31:06 +02:00
function animatePanzoom(translate, scale) {
zoomBehavior.scale(scale)
zoomBehavior.translate(translate)
var el = vis
if (doAnimation)
el = el.transition().duration(500)
el.attr("transform", "translate(" + translate + ") " +
"scale(" + scale + ")")
2015-03-31 21:31:06 +02:00
}
2015-03-31 17:22:36 +02:00
function panzoom() {
2015-03-31 21:18:06 +02:00
var translate = zoomBehavior.translate()
var scale = zoomBehavior.scale()
vis.attr("transform", "translate(" + translate + ") " +
"scale(" + scale + ")")
}
2015-04-01 18:21:54 +02:00
function getSize() {
var sidebarWidth = sidebar.getWidth()
var width = el.offsetWidth - sidebarWidth
var height = el.offsetHeight
return [width, height]
}
2015-03-31 21:18:06 +02:00
function panzoomTo(a, b) {
var sidebarWidth = sidebar.getWidth()
2015-04-01 18:21:54 +02:00
var size = getSize()
2015-03-31 21:18:06 +02:00
var targetWidth = Math.max(1, b[0] - a[0])
var targetHeight = Math.max(1, b[1] - a[1])
var scaleX = size[0] / targetWidth
var scaleY = size[1] / targetHeight
var scaleMax = zoomBehavior.scaleExtent()[1]
var scale = 0.5 * Math.min(scaleMax, Math.min(scaleX, scaleY))
var centroid = [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2]
var x = -centroid[0] * scale + size[0] / 2
var y = -centroid[1] * scale + size[1] / 2
var translate = [x + sidebarWidth, y]
2015-03-31 21:29:47 +02:00
animatePanzoom(translate, scale)
}
2015-03-31 17:22:36 +02:00
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 })
}
2015-03-31 21:31:06 +02:00
el = document.createElement("div")
2015-03-31 17:22:36 +02:00
el.classList.add("graph")
self.div = el
2015-03-31 21:18:06 +02:00
zoomBehavior = d3.behavior.zoom()
2015-03-31 21:31:06 +02:00
.scaleExtent([1 / 3, 3])
2015-03-31 21:18:06 +02:00
.on("zoom", panzoom)
.translate([sidebar.getWidth(), 0])
svg = d3.select(el).append("svg")
.attr("pointer-events", "all")
.call(zoomBehavior)
2015-03-31 21:18:06 +02:00
vis = svg.append("g")
2015-03-31 17:22:36 +02:00
vis.append("g").attr("class", "links")
vis.append("g").attr("class", "nodes")
force = d3.layout.force()
2015-03-31 21:18:06 +02:00
.charge(-70)
2015-03-31 17:22:36 +02:00
.gravity(0.05)
2015-04-01 00:06:17 +02:00
.linkDistance(LINK_DISTANCE)
2015-04-01 01:07:40 +02:00
.linkStrength(function (d) {
return 1 / d.tq
})
2015-03-31 17:22:36 +02:00
.on("tick", tickEvent)
.on("end", savePositions)
2015-03-31 17:22:36 +02:00
panzoom()
2015-03-31 17:22:36 +02:00
var draggableNode = d3.behavior.drag()
.on("dragstart", dragstart)
.on("drag", dragmove)
.on("dragend", dragend)
self.setData = function (data) {
var nodePositions = {}
if (localStorageTest()) {
var save = JSON.parse(localStorage.getItem("graph/nodeposition"))
if (save)
save.forEach( function (d) {
nodePositions[d.id] = d
})
}
2015-04-01 00:06:17 +02:00
links = data.graph.links.filter( function (d) {
2015-03-31 17:22:36 +02:00
return !d.vpn
})
link = vis.select("g.links")
2015-03-31 22:18:09 +02:00
.selectAll("g.link")
.data(links, linkId)
2015-03-31 17:22:36 +02:00
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)
2015-03-31 21:18:06 +02:00
linksDict[linkId(d)] = d
2015-03-31 17:22:36 +02:00
})
2015-04-01 00:06:17 +02:00
nodes = data.graph.nodes
2015-03-31 17:22:36 +02:00
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)
2015-03-31 21:18:06 +02:00
nodesDict[d.node.nodeinfo.node_id] = d
2015-03-31 17:22:36 +02:00
})
nodeEnter.append("title")
nodeEnter.each( function (d) {
if (nodePositions[d.id]) {
d.x = nodePositions[d.id].x
d.y = nodePositions[d.id].y
}
})
2015-03-31 17:22:36 +02:00
node.selectAll("title").text(nodeName)
2015-04-01 18:21:54 +02:00
var diameter = graphDiameter(nodes)
2015-03-31 17:22:36 +02:00
force.nodes(nodes)
.links(links)
2015-04-01 18:21:54 +02:00
.size([diameter, diameter])
.start()
2015-03-31 17:22:36 +02:00
}
self.resetView = function () {
node.classed("highlight", false)
link.classed("highlight", false)
2015-03-31 21:29:47 +02:00
2015-04-01 18:21:54 +02:00
panzoomTo([0, 0], force.size())
doAnimation = true
2015-03-31 17:22:36 +02:00
}
self.gotoNode = function (d) {
link.classed("highlight", false)
node.classed("highlight", function (e) {
return e.node === d && d !== undefined
})
2015-03-31 21:18:06 +02:00
var n = nodesDict[d.nodeinfo.node_id]
if (n)
panzoomTo([n.x, n.y], [n.x, n.y])
doAnimation = true
2015-03-31 17:22:36 +02:00
}
self.gotoLink = function (d) {
node.classed("highlight", false)
link.classed("highlight", function (e) {
return e === d && d !== undefined
})
2015-03-31 21:18:06 +02:00
var l = linksDict[linkId(d)]
if (l) {
var x = d3.extent([l.source, l.target], function (d) { return d.x })
var y = d3.extent([l.source, l.target], function (d) { return d.y })
panzoomTo([x[0], y[0]], [x[1], y[1]])
}
doAnimation = true
2015-03-31 17:22:36 +02:00
}
self.destroy = function () {
force.stop()
node.remove()
link.remove()
svg.remove()
force = null
svg = null
vis = null
link = null
node = null
}
2015-03-31 17:22:36 +02:00
return self
}
})