[TASK] Rewrite forcegraph with d3 v4

README.md

@@ -8,6 +8,7 @@ A web-app to visualize nodes and links on a map for Freifunk open mesh network.
 #### Main differences to https://github.com/ffnord/meshviewer
 _Some similar features might have been implemented/merged_
 
+- Forcegraph rewrite with d3.js v4
 - Map layer modes (Allow to set a default layer based on time combined with a stylesheet)
 - Automatic updates for selected node or list (incl. image stats cache-breaker)
 - Node filter

app.js

@@ -14,7 +14,23 @@ require.config({
     'leaflet.label': '../node_modules/leaflet-label/dist/leaflet.label',
     'chroma-js': '../node_modules/chroma-js/chroma.min',
     'moment': '../node_modules/moment/moment',
-    'd3': '../node_modules/d3/d3.min',
+    // d3 modules indirect dependencies
+    // by d3-zoom: d3-drag
+    'd3-ease': '../node_modules/d3-ease/build/d3-ease',
+    'd3-transition': '../node_modules/d3-transition/build/d3-transition',
+    'd3-color': '../node_modules/d3-color/build/d3-color',
+    'd3-interpolate': '../node_modules/d3-interpolate/build/d3-interpolate',
+    // by d3-force
+    'd3-collection': '../node_modules/d3-collection/build/d3-collection',
+    'd3-dispatch': '../node_modules/d3-dispatch/build/d3-dispatch',
+    'd3-quadtree': '../node_modules/d3-quadtree/build/d3-quadtree',
+    'd3-timer': '../node_modules/d3-timer/build/d3-timer',
+    // by d3-drag: d3-selection
+    // d3 modules dependencies
+    'd3-selection': '../node_modules/d3-selection/build/d3-selection',
+    'd3-force': '../node_modules/d3-force/build/d3-force',
+    'd3-zoom': '../node_modules/d3-zoom/build/d3-zoom',
+    'd3-drag': '../node_modules/d3-drag/build/d3-drag',
     'virtual-dom': '../node_modules/virtual-dom/dist/virtual-dom',
     'rbush': '../node_modules/rbush/rbush',
     'helper': 'utils/helper',
@@ -22,6 +38,9 @@ require.config({
   },
   shim: {
     'leaflet.label': ['leaflet'],
+    'd3-drag': ['d3-selection'],
+    'd3-force': ['d3-collection', 'd3-dispatch', 'd3-quadtree', 'd3-timer'],
+    'd3-zoom': ['d3-drag', 'd3-ease', 'd3-transition', 'd3-color', 'd3-interpolate'],
     'tablesort': {
       exports: 'Tablesort'
     }

lib/forcegraph/draw.js

+define(['helper'], function (helper) {
+  var self = {};
+
+  var ctx;
+  var width;
+  var height;
+
+  var transform;
+
+  var highlight;
+
+  var nodeColor = '#fff';
+  var clientColor = '#e6324b';
+
+  var cableColor = '#50b0f0';
+  var highlightColor = 'rgba(255, 255, 255, 0.2)';
+
+  var labelColor = '#fff';
+
+  var NODE_RADIUS = 15;
+  var LINE_RADIUS = 12;
+
+  function drawDetailNode(d) {
+    if (transform.k > 1) {
+      ctx.beginPath();
+      helper.positionClients(ctx, d, Math.PI, d.o.node.statistics.clients, 15);
+      ctx.fillStyle = clientColor;
+      ctx.fill();
+      ctx.beginPath();
+      var name = d.o.node_id;
+      if (d.o.node && d.o.node.nodeinfo) {
+        name = d.o.node.nodeinfo.hostname;
+      }
+      ctx.textAlign = 'center';
+      ctx.fillStyle = labelColor;
+      ctx.fillText(name, d.x, d.y + 20);
+    }
+  }
+
+  function drawHighlightNode(d) {
+    if (highlight && highlight.type === 'node' && d.o.node === highlight.o) {
+      ctx.arc(d.x, d.y, NODE_RADIUS * 1.5, 0, 2 * Math.PI);
+      ctx.fillStyle = highlightColor;
+      ctx.fill();
+      ctx.beginPath();
+    }
+  }
+
+  function drawHighlightLink(d, to) {
+    if (highlight && highlight.type === 'link' && d.o === highlight.o) {
+      ctx.lineTo(to[0], to[1]);
+      ctx.strokeStyle = highlightColor;
+      ctx.lineWidth = LINE_RADIUS * 2;
+      ctx.lineCap = 'round';
+      ctx.stroke();
+      to = [d.source.x, d.source.y];
+    }
+    return to;
+  }
+
+  self.drawNode = function drawNode(d) {
+    if (d.x < transform.invertX(0) || d.y < transform.invertY(0) || transform.invertX(width) < d.x || transform.invertY(height) < d.y) {
+      return;
+    }
+    ctx.beginPath();
+
+    drawHighlightNode(d);
+
+    ctx.moveTo(d.x + 3, d.y);
+    ctx.arc(d.x, d.y, 8, 0, 2 * Math.PI);
+    ctx.fillStyle = nodeColor;
+    ctx.fill();
+
+    drawDetailNode(d);
+  };
+
+  self.drawLink = function drawLink(d) {
+    var zero = transform.invert([0, 0]);
+    var area = transform.invert([width, height]);
+    if (d.source.x < zero[0] && d.target.x < zero[0] || d.source.y < zero[1] && d.target.y < zero[1] ||
+        d.source.x > area[0] && d.target.x > area[0] || d.source.y > area[1] && d.target.y > area[1]) {
+      return;
+    }
+    ctx.beginPath();
+    ctx.moveTo(d.source.x, d.source.y);
+    var to = [d.target.x, d.target.y];
+
+    to = drawHighlightLink(d, to);
+
+    ctx.lineTo(to[0], to[1]);
+    ctx.strokeStyle = d.o.type === 'Kabel' ? cableColor : d.color;
+    if (d.o.type === 'fastd' || d.o.type === 'L2TP') {
+      ctx.globalAlpha = 0.2;
+      ctx.lineWidth = 1.5;
+    } else {
+      ctx.globalAlpha = 0.8;
+      ctx.lineWidth = 2.5;
+    }
+    ctx.stroke();
+  };
+
+  self.setCTX = function setCTX(newValue) {
+    ctx = newValue;
+  };
+
+  self.setHighlight = function setHighlight(newValue) {
+    highlight = newValue;
+  };
+
+  self.setTransform = function setTransform(newValue) {
+    transform = newValue;
+  };
+
+  self.setMaxArea = function setMaxArea(newWidth, newHeight) {
+    width = newWidth;
+    height = newHeight;
+  };
+
+  return self;
+});

lib/utils/math.js

+define(function () {
+  return {
+    distance: function distance(a, b) {
+      return Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2);
+    },
+
+    distancePoint: function distancePoint(a, b) {
+      return Math.sqrt(distance(a, b));
+    },
+
+    distanceLink: function distanceLink(p, a, b) {
+      /* http://stackoverflow.com/questions/849211 */
+      var l2 = distance(a, b);
+      if (l2 === 0) {
+        return distance(p, a);
+      }
+      var t = ((p.x - a.x) * (b.x - a.x) + (p.y - a.y) * (b.y - a.y)) / l2;
+      if (t < 0) {
+        return distance(p, a);
+      } else if (t > 1) {
+        return distance(p, b);
+      }
+      return distancePoint(p, {
+        x: a.x + t * (b.x - a.x),
+        y: a.y + t * (b.y - a.y)
+      });
+    }
+  };
+});

package.json

@@ -44,7 +44,10 @@
   "dependencies": {
     "almond": "^0.3.3",
     "chroma-js": "^1.2.1",
-    "d3": "3.5",
+    "d3-drag": "^1.0.3",
+    "d3-force": "^1.0.5",
+    "d3-selection": "^1.0.4",
+    "d3-zoom": "^1.1.2",
     "leaflet": "https://github.com/davojta/Leaflet.git#stable_0_7_7_1_release",
     "leaflet-label": "^0.2.1-0",
     "moment": "^2.17.1",

yarn.lock

@@ -683,9 +683,76 @@ currently-unhandled@^0.4.1:
   dependencies:
     array-find-index "^1.0.1"
 
-d3@3.5:
-  version "3.5.17"
-  resolved "https://registry.yarnpkg.com/d3/-/d3-3.5.17.tgz#bc46748004378b21a360c9fc7cf5231790762fb8"
+d3-collection@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.2.tgz#df5acb5400443e9eabe9c1379896c67e52426b39"
+
+d3-color@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.0.2.tgz#83cb4b3a9474e40795f009d97e97a15649830bbc"
+
+d3-dispatch@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.2.tgz#5b511e79a46a1f89492841c0a8f656687d5daa0a"
+
+d3-drag@1, d3-drag@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-1.0.3.tgz#a016d21c696d130ba758babf1cd9e5f049169d0b"
+  dependencies:
+    d3-dispatch "1"
+    d3-selection "1"
+
+d3-ease@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.2.tgz#b486f8f3ca308ca7be38197d65622b6e30983377"
+
+d3-force@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-1.0.5.tgz#be8f65ac70688b8d26a9d9bc1e4699c1525f46b1"
+  dependencies:
+    d3-collection "1"
+    d3-dispatch "1"
+    d3-quadtree "1"
+    d3-timer "1"
+
+d3-interpolate@1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.1.3.tgz#e119c91b6be4941e581675ca3e1279bb92bd2c9b"
+  dependencies:
+    d3-color "1"
+
+d3-quadtree@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-1.0.2.tgz#e7e873af06aaa427eaa4af094cc4cbfb350b9e38"
+
+d3-selection@1, d3-selection@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.0.4.tgz#b862c7ae22436efe8459b7659ccdae84f09b43a3"
+
+d3-timer@1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.4.tgz#adaf7f60c7b54c99b2ffabd28c15a0c108a75321"
+
+d3-transition@1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-1.0.3.tgz#91dc986bddb30973639320a85db72ce4ab1a27bb"
+  dependencies:
+    d3-color "1"
+    d3-dispatch "1"
+    d3-ease "1"
+    d3-interpolate "1"
+    d3-selection "1"
+    d3-timer "1"
+
+d3-zoom@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-1.1.2.tgz#a8944947e92a12bc5d5a3fb4dccf1a40e7de5fb3"
+  dependencies:
+    d3-dispatch "1"
+    d3-drag "1"
+    d3-interpolate "1"
+    d3-selection "1"
+    d3-transition "1"
 
 d@^0.1.1, d@~0.1.1:
   version "0.1.1"