forcegraph: fit graph on resetView
This commit is contained in:
parent
0780a83dd2
commit
6cb6af2401
|
@ -1,6 +1,7 @@
|
||||||
define(["d3"], function (d3) {
|
define(["d3"], function (d3) {
|
||||||
return function (linkScale, sidebar, router) {
|
return function (linkScale, sidebar, router) {
|
||||||
var self = this
|
var self = this
|
||||||
|
var nodes, links
|
||||||
var svg, vis, link, node, label
|
var svg, vis, link, node, label
|
||||||
var nodesDict, linksDict
|
var nodesDict, linksDict
|
||||||
var zoomBehavior
|
var zoomBehavior
|
||||||
|
@ -8,6 +9,8 @@ define(["d3"], function (d3) {
|
||||||
var el
|
var el
|
||||||
var doAnimation = false
|
var doAnimation = false
|
||||||
|
|
||||||
|
var LINK_DISTANCE = 70
|
||||||
|
|
||||||
function nodeName(d) {
|
function nodeName(d) {
|
||||||
if (d.node && d.node.nodeinfo)
|
if (d.node && d.node.nodeinfo)
|
||||||
return d.node.nodeinfo.hostname
|
return d.node.nodeinfo.hostname
|
||||||
|
@ -117,7 +120,7 @@ define(["d3"], function (d3) {
|
||||||
force = d3.layout.force()
|
force = d3.layout.force()
|
||||||
.charge(-70)
|
.charge(-70)
|
||||||
.gravity(0.05)
|
.gravity(0.05)
|
||||||
.linkDistance(70)
|
.linkDistance(LINK_DISTANCE)
|
||||||
.on("tick", tickEvent)
|
.on("tick", tickEvent)
|
||||||
|
|
||||||
panzoom()
|
panzoom()
|
||||||
|
@ -130,7 +133,7 @@ define(["d3"], function (d3) {
|
||||||
window.addEventListener("resize", resize)
|
window.addEventListener("resize", resize)
|
||||||
|
|
||||||
self.setData = function (data) {
|
self.setData = function (data) {
|
||||||
var links = data.graph.links.filter( function (d) {
|
links = data.graph.links.filter( function (d) {
|
||||||
return !d.vpn
|
return !d.vpn
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -160,7 +163,7 @@ define(["d3"], function (d3) {
|
||||||
linksDict[linkId(d)] = d
|
linksDict[linkId(d)] = d
|
||||||
})
|
})
|
||||||
|
|
||||||
var nodes = data.graph.nodes
|
nodes = data.graph.nodes
|
||||||
|
|
||||||
node = vis.select("g.nodes")
|
node = vis.select("g.nodes")
|
||||||
.selectAll(".node")
|
.selectAll(".node")
|
||||||
|
@ -240,7 +243,13 @@ define(["d3"], function (d3) {
|
||||||
node.classed("highlight", false)
|
node.classed("highlight", false)
|
||||||
link.classed("highlight", false)
|
link.classed("highlight", false)
|
||||||
|
|
||||||
animatePanzoom([sidebar.getWidth(), 0], 1)
|
var size = force.size()
|
||||||
|
var diameter = Math.sqrt(nodes.length / Math.PI) * LINK_DISTANCE
|
||||||
|
var x = (size[0] - diameter) / 2
|
||||||
|
var y = (size[1] - diameter) / 2
|
||||||
|
console.log(x, y)
|
||||||
|
|
||||||
|
panzoomTo([x, y], [x + diameter, y + diameter])
|
||||||
|
|
||||||
doAnimation = true
|
doAnimation = true
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue