add forcegraph
This commit is contained in:
parent
b8a9ac9a26
commit
4b076ab3b9
1
app.js
1
app.js
|
@ -7,6 +7,7 @@ require.config({
|
|||
"moment": "../bower_components/moment/min/moment-with-locales.min",
|
||||
"tablesort": "../bower_components/tablesort/tablesort.min",
|
||||
"tablesort.numeric": "../bower_components/tablesort/src/sorts/tablesort.numeric",
|
||||
"d3": "../bower_components/d3/d3.min",
|
||||
"helper": "../helper"
|
||||
},
|
||||
shim: {
|
||||
|
|
|
@ -19,7 +19,8 @@
|
|||
"roboto-slab-fontface": "*",
|
||||
"es6-shim": "~0.27.1",
|
||||
"almond": "~0.3.1",
|
||||
"r.js": "~2.1.16"
|
||||
"r.js": "~2.1.16",
|
||||
"d3": "~3.5.5"
|
||||
},
|
||||
"authors": [
|
||||
"Nils Schneider <nils@nilsschneider.net>"
|
||||
|
|
BIN
img/geometry2.png
Normal file
BIN
img/geometry2.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.1 KiB |
211
lib/forcegraph.js
Normal file
211
lib/forcegraph.js
Normal file
|
@ -0,0 +1,211 @@
|
|||
// TODO
|
||||
// - window size
|
||||
// - avoid sidebar
|
||||
// - pan to node
|
||||
// - pan and zoom to link
|
||||
define(["d3"], function (d3) {
|
||||
return function (linkScale, sidebar, router) {
|
||||
var self = this
|
||||
var vis, link, node, label
|
||||
var nodesDict, linksDict
|
||||
var force
|
||||
|
||||
function nodeName(d) {
|
||||
if (d.node && d.node.nodeinfo)
|
||||
return d.node.nodeinfo.hostname
|
||||
else
|
||||
return d.id
|
||||
}
|
||||
|
||||
function dragstart(d) {
|
||||
d3.event.sourceEvent.stopPropagation()
|
||||
d.fixed |= 2
|
||||
}
|
||||
|
||||
function dragmove(d) {
|
||||
d.px = d3.event.x
|
||||
d.py = d3.event.y
|
||||
force.resume()
|
||||
}
|
||||
|
||||
function dragend(d) {
|
||||
d3.event.sourceEvent.stopPropagation()
|
||||
d.fixed &= 1
|
||||
}
|
||||
|
||||
function panzoom() {
|
||||
vis.attr("transform",
|
||||
"translate(" + d3.event.translate + ") "
|
||||
+ "scale(" + d3.event.scale + ")")
|
||||
}
|
||||
|
||||
function tickEvent() {
|
||||
link.selectAll("line")
|
||||
.attr("x1", function(d) { return d.source.x })
|
||||
.attr("y1", function(d) { return d.source.y })
|
||||
.attr("x2", function(d) { return d.target.x })
|
||||
.attr("y2", function(d) { return d.target.y })
|
||||
|
||||
node
|
||||
.attr("cx", function(d) { return d.x })
|
||||
.attr("cy", function(d) { return d.y })
|
||||
|
||||
label.attr("transform", function(d) {
|
||||
return "translate(" + d.x + "," + d.y + ")"
|
||||
})
|
||||
}
|
||||
|
||||
var el = document.createElement("div")
|
||||
el.classList.add("graph")
|
||||
self.div = el
|
||||
|
||||
vis = d3.select(el).append("svg")
|
||||
.attr("pointer-events", "all")
|
||||
.call(d3.behavior.zoom().on("zoom", panzoom))
|
||||
.append("g")
|
||||
|
||||
vis.append("g").attr("class", "links")
|
||||
vis.append("g").attr("class", "nodes")
|
||||
vis.append("g").attr("class", "labels").attr("pointer-events", "none")
|
||||
|
||||
force = d3.layout.force()
|
||||
.size([500, 500])
|
||||
.charge(-100)
|
||||
.gravity(0.05)
|
||||
.friction(0.73)
|
||||
.theta(0.8)
|
||||
.linkDistance(70)
|
||||
.linkStrength(0.2)
|
||||
.on("tick", tickEvent)
|
||||
|
||||
var draggableNode = d3.behavior.drag()
|
||||
.on("dragstart", dragstart)
|
||||
.on("drag", dragmove)
|
||||
.on("dragend", dragend)
|
||||
|
||||
self.setData = function (data) {
|
||||
var links = data.graph.links.filter( function (d) {
|
||||
return !d.vpn
|
||||
})
|
||||
|
||||
link = vis.select("g.links")
|
||||
.selectAll("g.link")
|
||||
.data(links, linkId)
|
||||
|
||||
var linkEnter = link.enter().append("g")
|
||||
.attr("class", "link")
|
||||
.on("click", function (d) {
|
||||
if (!d3.event.defaultPrevented)
|
||||
router.link(d)()
|
||||
})
|
||||
|
||||
linkEnter.append("line")
|
||||
.append("title")
|
||||
|
||||
link.selectAll("line")
|
||||
.style("stroke", function (d) { return linkScale(d.tq) })
|
||||
|
||||
link.selectAll("title").text(showTq)
|
||||
|
||||
linksDict = {}
|
||||
|
||||
link.each( function (d) {
|
||||
if (d.source.node && d.target.node)
|
||||
linksDict[linkId(d)] = this
|
||||
})
|
||||
|
||||
var nodes = data.graph.nodes
|
||||
|
||||
node = vis.select("g.nodes")
|
||||
.selectAll(".node")
|
||||
.data(nodes,
|
||||
function(d) {
|
||||
return d.id
|
||||
}
|
||||
)
|
||||
|
||||
var nodeEnter = node.enter().append("circle")
|
||||
.attr("r", 8)
|
||||
.on("click", function (d) {
|
||||
if (!d3.event.defaultPrevented)
|
||||
router.node(d.node)()
|
||||
})
|
||||
.call(draggableNode)
|
||||
|
||||
node.attr("class", function (d) {
|
||||
var s = ["node"]
|
||||
if (!d.node)
|
||||
s.push("unknown")
|
||||
|
||||
return s.join(" ")
|
||||
})
|
||||
|
||||
nodesDict = {}
|
||||
|
||||
node.each( function (d) {
|
||||
if (d.node)
|
||||
nodesDict[d.node.nodeinfo.node_id] = this
|
||||
})
|
||||
|
||||
label = vis.select("g.labels")
|
||||
.selectAll("g.label")
|
||||
.data(data.graph.nodes, function (d) {
|
||||
return d.id
|
||||
})
|
||||
|
||||
var labelEnter = label.enter()
|
||||
.append("g")
|
||||
.attr("class", "label")
|
||||
|
||||
labelEnter.append("path").attr("class", "clients")
|
||||
|
||||
labelEnter.append("text")
|
||||
.attr("class", "name")
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("y", "21px")
|
||||
.attr("x", "0px")
|
||||
|
||||
label.selectAll("text.name").text(nodeName)
|
||||
|
||||
var labelTextWidth = function (e) {
|
||||
return e.parentNode.querySelector("text").getBBox().width + 3
|
||||
}
|
||||
|
||||
labelEnter.insert("rect", "text")
|
||||
.attr("y", "10px")
|
||||
.attr("x", function() { return labelTextWidth(this) / (-2)})
|
||||
.attr("width", function() { return labelTextWidth(this)})
|
||||
.attr("height", "15px")
|
||||
|
||||
nodeEnter.append("title")
|
||||
|
||||
node.selectAll("title").text(nodeName)
|
||||
|
||||
force.nodes(nodes)
|
||||
.links(links)
|
||||
.alpha(0.1)
|
||||
.start()
|
||||
}
|
||||
|
||||
self.resetView = function () {
|
||||
node.classed("highlight", false)
|
||||
link.classed("highlight", false)
|
||||
}
|
||||
|
||||
self.gotoNode = function (d) {
|
||||
link.classed("highlight", false)
|
||||
node.classed("highlight", function (e) {
|
||||
return e.node === d && d !== undefined
|
||||
})
|
||||
}
|
||||
|
||||
self.gotoLink = function (d) {
|
||||
node.classed("highlight", false)
|
||||
link.classed("highlight", function (e) {
|
||||
return e === d && d !== undefined
|
||||
})
|
||||
}
|
||||
|
||||
return self
|
||||
}
|
||||
})
|
57
scss/_forcegraph.scss
Normal file
57
scss/_forcegraph.scss
Normal file
|
@ -0,0 +1,57 @@
|
|||
.graph {
|
||||
height: 100vh;
|
||||
background: url(img/geometry2.png);
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.link {
|
||||
stroke-opacity: 0.8;
|
||||
|
||||
line {
|
||||
stroke-width: 2.5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.highlight line {
|
||||
stroke-width: 7px;
|
||||
stroke-dasharray: 10, 10;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.node {
|
||||
fill: #fff;
|
||||
stroke-width: 2.5px;
|
||||
stroke: #AEC7E8;
|
||||
|
||||
&:not(.unknown) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.highlight {
|
||||
stroke: #FFD486;
|
||||
stroke-width: 6px;
|
||||
fill: orange;
|
||||
point-order: stroke;
|
||||
}
|
||||
|
||||
&.unknown {
|
||||
stroke: #d00000;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
text {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
rect {
|
||||
fill: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
@import '_leaflet';
|
||||
@import '_leaflet.label';
|
||||
@import '_forcegraph';
|
||||
|
||||
.stroke-first {
|
||||
paint-order: stroke;
|
||||
|
|
|
@ -7,6 +7,11 @@ module.exports = function(grunt) {
|
|||
cwd: "html/",
|
||||
dest: "build/"
|
||||
},
|
||||
img: {
|
||||
src: ["img/*"],
|
||||
expand: true,
|
||||
dest: "build/"
|
||||
},
|
||||
vendorjs: {
|
||||
src: [ "es6-shim/es6-shim.min.js",
|
||||
"intl/Intl.complete.js"
|
||||
|
|
Loading…
Reference in a new issue