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

more fiddling with d3

Browse Source
This commit is contained in:
Oliver Gorwits
2017-12-14 21:34:49 +00:00
parent 61a3a9e06d
commit 854f37fc94
3 changed files with 28 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
lib/App/Netdisco/Web/Plugin/Device/Neighbors.pm
View File

@@ -42,6 +42,7 @@ ajax '/ajax/data/device/netmap' => require_login sub {
SIZEVALUE => 3000, SIZEVALUE => 3000,
COLORVALUE => 10, COLORVALUE => 10,
LABEL => $name, LABEL => $name,
fixed => true,
}; };
push @{$v4data{'nodes'}}, { index => ($device->{row_number} - 1) }; push @{$v4data{'nodes'}}, { index => ($device->{row_number} - 1) };

2
share/public/javascripts/worker.js
View File

@@ -10,7 +10,7 @@ onmessage = function(event) {
var simulation = d3.forceSimulation(nodes) var simulation = d3.forceSimulation(nodes)
.force("charge", d3.forceManyBody()) .force("charge", d3.forceManyBody())
.force("link", d3.forceLink(links).distance(20).strength(1)) .force("link", d3.forceLink(links).distance(200).strength(0.5))
.force("x", d3.forceX()) .force("x", d3.forceX())
.force("y", d3.forceY()) .force("y", d3.forceY())
.stop(); .stop();

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

@@ -13,20 +13,27 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]', {q: '[% params.q %]'}, fu
} }
jQuery(document).ready(function() { jQuery(document).ready(function() {
window.netmap_pane = netGobrechtsD3Force() window.netmap_pane = netGobrechtsD3Force('netmap_pane')
.debug(true) .debug(true)
.lassoMode(true) .lassoMode(true)
.nodeEventToOpenLink('click') .nodeEventToOpenLink('click')
.nodeLinkTarget('none') .nodeLinkTarget('none')
.labelDistance(2) .labelDistance(2)
.charge(-850)
.zoomMode(true) .zoomMode(true)
.preventLabelOverlappingOnForceEnd(true)
.showLinkDirection(false) .showLinkDirection(false)
.preventLabelOverlappingOnForceEnd(true)
.showSelfLinks(true) .showSelfLinks(true)
.minZoomFactor(0.1) .minZoomFactor(0.1)
.maxZoomFactor(10); .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 // center on our selected device
netmap_pane.inspect().main.force.on('end.centernode', function() { netmap_pane.inspect().main.force.on('end.centernode', function() {
var node = netmap_pane.nodeDataById( mapdata['v3']['centernode'] ); var node = netmap_pane.nodeDataById( mapdata['v3']['centernode'] );
@@ -39,7 +46,6 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]', {q: '[% params.q %]'}, fu
jQuery(window).on("resize", resizeGraphContainer); jQuery(window).on("resize", resizeGraphContainer);
var worker = new Worker( 'http://localhost:5000/javascripts/worker.js' ); var worker = new Worker( 'http://localhost:5000/javascripts/worker.js' );
worker.postMessage(mapdata['v4']); worker.postMessage(mapdata['v4']);
worker.onmessage = function(event) { worker.onmessage = function(event) {
switch (event.data.type) { switch (event.data.type) {
@@ -55,20 +61,26 @@ $.getJSON('[% uri_for('/ajax/data/device/netmap') %]', {q: '[% params.q %]'}, fu
} }
function ended(data) { function ended(data) {
var newnodes = data.nodes.map(function(node) { var netmapdata = {'data': {
var index = node['index']; 'nodes': data.nodes.map(function(node) {
var x = mapdata['v3']['nodes'][index]; var index = node['index'];
x['x'] = node['x']; var x = mapdata['v3']['nodes'][index];
x['y'] = node['y']; x['x'] = node['x'];
return x; x['y'] = node['y'];
}); return x;
}),
var netmapdata = {'data': {'nodes': newnodes, 'links': mapdata['v3']['links']}}; 'links': mapdata['v3']['links']
}};
netmap_pane.start(netmapdata); netmap_pane.start(netmapdata);
resizeGraphContainer(); resizeGraphContainer();
netmap_pane.inspect().main.force.alpha(0.005).tick();
netmap_pane.inspect().main.force.stop();
netmap_pane.inspect().main.force.tick = ticker;
var node = netmap_pane.nodeDataById( mapdata['v3']['centernode'] );
netmap_pane.zoomSmooth(node.x, node.y, node.radius * 200);
} }
}); });
}); });
// vim: ft=javascript // vim: ft=javascript