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')
+    var canvas = document.querySelector("canvas"),
-      .debug(true)
+        context = canvas.getContext("2d"),
-      .lassoMode(true)
+        width = canvas.width,
-      .nodeEventToOpenLink('click')
+        height = canvas.height;
-      .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;
+//    window.netmap_pane = netGobrechtsD3Force('netmap_pane')
-    netmap_pane.inspect().main.force.tick = (function(forceTick) {
+//      .debug(true)
-      return function() {
+//      .lassoMode(true)
-        forceTick();
+//      .nodeEventToOpenLink('click')
-        return true;
+//      .nodeLinkTarget('none')
-      }
+//      .labelDistance(2)
-    }(netmap_pane.inspect().main.force.tick));
+//      .zoomMode(true)
-
+//      .showLinkDirection(false)
-    // center on our selected device
+//      .preventLabelOverlappingOnForceEnd(true)
-    netmap_pane.inspect().main.force.on('end.centernode', function() {
+//      .showSelfLinks(true)
-      var node = netmap_pane.nodeDataById( mapdata['v3']['centernode'] );
+//      .minZoomFactor(0.1)
-      netmap_pane.zoomSmooth(node.x, node.y, node.radius * 200);
+//      .maxZoomFactor(10);
-      netmap_pane.inspect().main.force.on('end.centernode', null);
+//
-    });
+//    var ticker = netmap_pane.inspect().main.force.tick;
-
+//    netmap_pane.inspect().main.force.tick = (function(forceTick) {
-    jQuery('#nd_sidebar-toggle-img-in').on("click", resizeGraphContainer);
+//      return function() {
-    jQuery('#nd_sidebar-toggle-img-out').on("click", resizeGraphContainer);
+//        forceTick();
-    jQuery(window).on("resize", resizeGraphContainer);
+//        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': {
+      var nodes = data.nodes,
-        'nodes': data.nodes.map(function(node) {
+          links = data.links;
-          var index = node['index'];
+
-          var x = mapdata['v3']['nodes'][index];
+      context.clearRect(0, 0, width, height);
-          x['x'] = node['x'];
+      context.save();
-          x['y'] = node['y'];
+      context.translate(width / 2, height / 2);
-          return x;
+
-        }),
+      context.beginPath();
-        'links': mapdata['v3']['links']
+      links.forEach(drawLink);
-      }};
+      context.strokeStyle = "#aaa";
-      netmap_pane.start(netmapdata);
+      context.stroke();
-      netmap_pane.inspect().main.force.alpha(0.005).tick();
+
-      netmap_pane.inspect().main.force.stop();
+      context.beginPath();
-      netmap_pane.inspect().main.force.tick = ticker;
+      nodes.forEach(drawNode);
-      resizeGraphContainer();
+      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>