Bladeren bron

forcegraph: store nodeposition in localstorage

Nils Schneider 9 jaren geleden
bovenliggende
commit
05386f0772
1 gewijzigde bestanden met toevoegingen van 23 en 2 verwijderingen
  1. 23 2
      lib/forcegraph.js

+ 23 - 2
lib/forcegraph.js

@@ -11,6 +11,14 @@ define(["d3"], function (d3) {
 
     var LINK_DISTANCE = 70
 
+    function savePositions() {
+      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
@@ -122,6 +130,7 @@ define(["d3"], function (d3) {
               .gravity(0.05)
               .linkDistance(LINK_DISTANCE)
               .on("tick", tickEvent)
+              .on("end", savePositions)
 
     panzoom()
 
@@ -133,6 +142,14 @@ define(["d3"], function (d3) {
     window.addEventListener("resize", resize)
 
     self.setData = function (data) {
+      var save = JSON.parse(localStorage.getItem("graph/nodeposition"))
+      var nodePositions = {}
+
+      if (save)
+        save.forEach( function (d) {
+          nodePositions[d.id] = d
+        })
+
       links = data.graph.links.filter( function (d) {
         return !d.vpn
       })
@@ -227,10 +244,15 @@ define(["d3"], function (d3) {
                 .attr("height", "15px")
 
       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)
 
@@ -247,7 +269,6 @@ define(["d3"], function (d3) {
       var diameter = Math.sqrt(nodes.length / Math.PI) * LINK_DISTANCE
       var x = (size[0] - diameter) / 2
       var y = (size[1] - diameter) / 2
-      console.log(x, y)
 
       panzoomTo([x, y], [x + diameter, y + diameter])