forcegraph: store nodeposition in localstorage
This commit is contained in:
parent
efe6c470db
commit
05386f0772
|
@ -11,6 +11,14 @@ define(["d3"], function (d3) {
|
||||||
|
|
||||||
var LINK_DISTANCE = 70
|
var LINK_DISTANCE = 70
|
||||||
|
|
||||||
|
function savePositions() {
|
||||||
|
var save = nodes.map( function (d) {
|
||||||
|
return { id: d.id, x: d.x, y: d.y }
|
||||||
|
})
|
||||||
|
|
||||||
|
localStorage.setItem("graph/nodeposition", JSON.stringify(save))
|
||||||
|
}
|
||||||
|
|
||||||
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
|
||||||
|
@ -122,6 +130,7 @@ define(["d3"], function (d3) {
|
||||||
.gravity(0.05)
|
.gravity(0.05)
|
||||||
.linkDistance(LINK_DISTANCE)
|
.linkDistance(LINK_DISTANCE)
|
||||||
.on("tick", tickEvent)
|
.on("tick", tickEvent)
|
||||||
|
.on("end", savePositions)
|
||||||
|
|
||||||
panzoom()
|
panzoom()
|
||||||
|
|
||||||
|
@ -133,6 +142,14 @@ define(["d3"], function (d3) {
|
||||||
window.addEventListener("resize", resize)
|
window.addEventListener("resize", resize)
|
||||||
|
|
||||||
self.setData = function (data) {
|
self.setData = function (data) {
|
||||||
|
var save = JSON.parse(localStorage.getItem("graph/nodeposition"))
|
||||||
|
var nodePositions = {}
|
||||||
|
|
||||||
|
if (save)
|
||||||
|
save.forEach( function (d) {
|
||||||
|
nodePositions[d.id] = d
|
||||||
|
})
|
||||||
|
|
||||||
links = data.graph.links.filter( function (d) {
|
links = data.graph.links.filter( function (d) {
|
||||||
return !d.vpn
|
return !d.vpn
|
||||||
})
|
})
|
||||||
|
@ -227,10 +244,15 @@ define(["d3"], function (d3) {
|
||||||
.attr("height", "15px")
|
.attr("height", "15px")
|
||||||
|
|
||||||
nodeEnter.append("title")
|
nodeEnter.append("title")
|
||||||
|
nodeEnter.each( function (d) {
|
||||||
|
if (nodePositions[d.id]) {
|
||||||
|
d.x = nodePositions[d.id].x
|
||||||
|
d.y = nodePositions[d.id].y
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
node.selectAll("title").text(nodeName)
|
node.selectAll("title").text(nodeName)
|
||||||
|
|
||||||
|
|
||||||
force.nodes(nodes)
|
force.nodes(nodes)
|
||||||
.links(links)
|
.links(links)
|
||||||
|
|
||||||
|
@ -247,7 +269,6 @@ define(["d3"], function (d3) {
|
||||||
var diameter = Math.sqrt(nodes.length / Math.PI) * LINK_DISTANCE
|
var diameter = Math.sqrt(nodes.length / Math.PI) * LINK_DISTANCE
|
||||||
var x = (size[0] - diameter) / 2
|
var x = (size[0] - diameter) / 2
|
||||||
var y = (size[1] - diameter) / 2
|
var y = (size[1] - diameter) / 2
|
||||||
console.log(x, y)
|
|
||||||
|
|
||||||
panzoomTo([x, y], [x + diameter, y + diameter])
|
panzoomTo([x, y], [x + diameter, y + diameter])
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue