use d3 v4 only

share/views/ajax/device/netmap.tt

@@ -13,37 +13,42 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]', {q: '[% params.q %]'}, fu
   }
 
   jQuery(document).ready(function() {
-    window.netmap_pane = netGobrechtsD3Force('netmap_pane')
-      .debug(true)
-      .lassoMode(true)
-      .nodeEventToOpenLink('click')
-      .nodeLinkTarget('none')
-      .labelDistance(2)
-      .zoomMode(true)
-      .showLinkDirection(false)
-      .preventLabelOverlappingOnForceEnd(true)
-      .showSelfLinks(true)
-      .minZoomFactor(0.1)
-      .maxZoomFactor(10);
+    var canvas = document.querySelector("canvas"),
+        context = canvas.getContext("2d"),
+        width = canvas.width,
+        height = canvas.height;
 
-    var ticker = netmap_pane.inspect().main.force.tick;
-    netmap_pane.inspect().main.force.tick = (function(forceTick) {
-      return function() {
-        forceTick();
-        return true;
-      }
-    }(netmap_pane.inspect().main.force.tick));
-
-    // center on our selected device
-    netmap_pane.inspect().main.force.on('end.centernode', function() {
-      var node = netmap_pane.nodeDataById( mapdata['v3']['centernode'] );
-      netmap_pane.zoomSmooth(node.x, node.y, node.radius * 200);
-      netmap_pane.inspect().main.force.on('end.centernode', null);
-    });
-
-    jQuery('#nd_sidebar-toggle-img-in').on("click", resizeGraphContainer);
-    jQuery('#nd_sidebar-toggle-img-out').on("click", resizeGraphContainer);
-    jQuery(window).on("resize", resizeGraphContainer);
+//    window.netmap_pane = netGobrechtsD3Force('netmap_pane')
+//      .debug(true)
+//      .lassoMode(true)
+//      .nodeEventToOpenLink('click')
+//      .nodeLinkTarget('none')
+//      .labelDistance(2)
+//      .zoomMode(true)
+//      .showLinkDirection(false)
+//      .preventLabelOverlappingOnForceEnd(true)
+//      .showSelfLinks(true)
+//      .minZoomFactor(0.1)
+//      .maxZoomFactor(10);
+//
+//    var ticker = netmap_pane.inspect().main.force.tick;
+//    netmap_pane.inspect().main.force.tick = (function(forceTick) {
+//      return function() {
+//        forceTick();
+//        return true;
+//      }
+//    }(netmap_pane.inspect().main.force.tick));
+//
+//    // center on our selected device
+//    netmap_pane.inspect().main.force.on('end.centernode', function() {
+//      var node = netmap_pane.nodeDataById( mapdata['v3']['centernode'] );
+//      netmap_pane.zoomSmooth(node.x, node.y, node.radius * 200);
+//      netmap_pane.inspect().main.force.on('end.centernode', null);
+//    });
+//
+//    jQuery('#nd_sidebar-toggle-img-in').on("click", resizeGraphContainer);
+//    jQuery('#nd_sidebar-toggle-img-out').on("click", resizeGraphContainer);
+//    jQuery(window).on("resize", resizeGraphContainer);
 
     var worker = new Worker( 'http://localhost:5000/javascripts/worker.js' );
     worker.postMessage(mapdata['v4']);
@@ -60,22 +65,54 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]', {q: '[% params.q %]'}, fu
       //meter.style.width = 100 * progress + "%";
     }
 
+//    function ended(data) {
+//      var netmapdata = {'data': {
+//        'nodes': data.nodes.map(function(node) {
+//          var index = node['index'];
+//          var x = mapdata['v3']['nodes'][index];
+//          x['x'] = node['x'];
+//          x['y'] = node['y'];
+//          return x;
+//        }),
+//        'links': mapdata['v3']['links']
+//      }};
+//      netmap_pane.start(netmapdata);
+//      netmap_pane.inspect().main.force.alpha(0.005).tick();
+//      netmap_pane.inspect().main.force.stop();
+//      netmap_pane.inspect().main.force.tick = ticker;
+//      resizeGraphContainer();
+//    }
+
     function ended(data) {
-      var netmapdata = {'data': {
-        'nodes': data.nodes.map(function(node) {
-          var index = node['index'];
-          var x = mapdata['v3']['nodes'][index];
-          x['x'] = node['x'];
-          x['y'] = node['y'];
-          return x;
-        }),
-        'links': mapdata['v3']['links']
-      }};
-      netmap_pane.start(netmapdata);
-      netmap_pane.inspect().main.force.alpha(0.005).tick();
-      netmap_pane.inspect().main.force.stop();
-      netmap_pane.inspect().main.force.tick = ticker;
-      resizeGraphContainer();
+      var nodes = data.nodes,
+          links = data.links;
+
+      context.clearRect(0, 0, width, height);
+      context.save();
+      context.translate(width / 2, height / 2);
+
+      context.beginPath();
+      links.forEach(drawLink);
+      context.strokeStyle = "#aaa";
+      context.stroke();
+
+      context.beginPath();
+      nodes.forEach(drawNode);
+      context.fill();
+      context.strokeStyle = "#fff";
+      context.stroke();
+
+      context.restore();
+    }
+
+    function drawLink(d) {
+      context.moveTo(d.source.x, d.source.y);
+      context.lineTo(d.target.x, d.target.y);
+    }
+
+    function drawNode(d) {
+      context.moveTo(d.x + 3, d.y);
+      context.arc(d.x, d.y, 3, 0, 2 * Math.PI);
     }
   });
 
@@ -83,3 +120,5 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]', {q: '[% params.q %]'}, fu
 
 // vim: ft=javascript
 </script>
+
+<canvas width="960" height="960"></canvas>