123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299 |
- define(["d3"], function (d3) {
- return function (linkScale, sidebar, router) {
- var self = this
- var nodes, links
- var svg, vis, link, node
- var nodesDict, linksDict
- var zoomBehavior
- var force
- var el
- var doAnimation = false
- var LINK_DISTANCE = 70
- 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))
- }
- 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 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 + ")")
- }
- function panzoom() {
- var translate = zoomBehavior.translate()
- var scale = zoomBehavior.scale()
- vis.attr("transform", "translate(" + translate + ") " +
- "scale(" + scale + ")")
- }
- function panzoomTo(a, b) {
- var sidebarWidth = sidebar.getWidth()
- var size = force.size()
- 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]
- animatePanzoom(translate, scale)
- }
- function resize() {
- var sidebarWidth = sidebar.getWidth()
- var width = el.offsetWidth - sidebarWidth
- var height = el.offsetHeight
- force.size([width, height])
- }
- 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 })
- }
- el = document.createElement("div")
- el.classList.add("graph")
- self.div = el
- zoomBehavior = d3.behavior.zoom()
- .scaleExtent([1 / 3, 3])
- .on("zoom", panzoom)
- .translate([sidebar.getWidth(), 0])
- svg = d3.select(el).append("svg")
- .attr("pointer-events", "all")
- .call(zoomBehavior)
- vis = svg.append("g")
- vis.append("g").attr("class", "links")
- vis.append("g").attr("class", "nodes")
- force = d3.layout.force()
- .charge(-70)
- .gravity(0.05)
- .linkDistance(LINK_DISTANCE)
- .linkStrength(function (d) {
- return 1 / d.tq
- })
- .on("tick", tickEvent)
- .on("end", savePositions)
- panzoom()
- var draggableNode = d3.behavior.drag()
- .on("dragstart", dragstart)
- .on("drag", dragmove)
- .on("dragend", dragend)
- window.addEventListener("resize", resize)
- 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
- })
- }
- 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)] = d
- })
- 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] = d
- })
- nodeEnter.append("title")
- nodeEnter.each( function (d) {
- if (nodePositions[d.id]) {
- d.x = nodePositions[d.id].x
- d.y = nodePositions[d.id].y
- }
- })
- node.selectAll("title").text(nodeName)
- force.nodes(nodes)
- .links(links)
- resize()
- force.start()
- }
- self.resetView = function () {
- node.classed("highlight", false)
- link.classed("highlight", false)
- var size = force.size()
- var diameter = Math.sqrt(nodes.length / Math.PI) * LINK_DISTANCE
- var x = (size[0] - diameter) / 2
- var y = (size[1] - diameter) / 2
- panzoomTo([x, y], [x + diameter, y + diameter])
- doAnimation = true
- }
- self.gotoNode = function (d) {
- link.classed("highlight", false)
- node.classed("highlight", function (e) {
- return e.node === d && d !== undefined
- })
- var n = nodesDict[d.nodeinfo.node_id]
- if (n)
- panzoomTo([n.x, n.y], [n.x, n.y])
- doAnimation = true
- }
- self.gotoLink = function (d) {
- node.classed("highlight", false)
- link.classed("highlight", function (e) {
- return e === d && d !== undefined
- })
- 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
- }
- self.destroy = function () {
- window.removeEventListener("resize", resize)
- force.stop()
- node.remove()
- link.remove()
- svg.remove()
- force = null
- svg = null
- vis = null
- link = null
- node = null
- }
- return self
- }
- })
|