135/netdisco
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use d3 v4 only

Browse Source
This commit is contained in:
Oliver Gorwits
2017-12-16 15:33:41 +00:00
parent 01cd7a908d
commit 444e82b8a3
1 changed files with 84 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
share/views/ajax/device/netmap.tt
View File

@@ -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>