meshviewer/lib/forcegraph.js

// 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
  }
})