|
@@ -1,7 +1,7 @@
|
|
|
define(["d3"], function (d3) {
|
|
|
return function (config, linkScale, sidebar, router) {
|
|
|
var self = this
|
|
|
- var svg, vis, link, node
|
|
|
+ var svg, vis, link, node, label
|
|
|
var nodesDict, linksDict
|
|
|
var zoomBehavior
|
|
|
var force
|
|
@@ -14,7 +14,7 @@ define(["d3"], function (d3) {
|
|
|
var LINK_DISTANCE = 70
|
|
|
|
|
|
function graphDiameter(nodes) {
|
|
|
- return Math.sqrt(nodes.length / Math.PI) * LINK_DISTANCE
|
|
|
+ return Math.sqrt(nodes.length / Math.PI) * LINK_DISTANCE * 1.41
|
|
|
}
|
|
|
|
|
|
function savePositions() {
|
|
@@ -51,6 +51,11 @@ define(["d3"], function (d3) {
|
|
|
d.fixed &= 1
|
|
|
}
|
|
|
|
|
|
+ var draggableNode = d3.behavior.drag()
|
|
|
+ .on("dragstart", dragstart)
|
|
|
+ .on("drag", dragmove)
|
|
|
+ .on("dragend", dragend)
|
|
|
+
|
|
|
function animatePanzoom(translate, scale) {
|
|
|
zoomBehavior.scale(scale)
|
|
|
zoomBehavior.translate(translate)
|
|
@@ -141,6 +146,112 @@ define(["d3"], function (d3) {
|
|
|
panzoomTo([0, 0], force.size())
|
|
|
}
|
|
|
|
|
|
+ function updateLinks(vis, data) {
|
|
|
+ var link = vis.selectAll("g.link")
|
|
|
+ .data(data, function (d) { return d.o.id })
|
|
|
+
|
|
|
+ link.exit().remove()
|
|
|
+
|
|
|
+ var linkEnter = link.enter().append("g")
|
|
|
+ .attr("class", "link")
|
|
|
+ .on("click", function (d) {
|
|
|
+ if (!d3.event.defaultPrevented)
|
|
|
+ router.link(d.o)()
|
|
|
+ })
|
|
|
+
|
|
|
+ linkEnter.append("line")
|
|
|
+ .append("title")
|
|
|
+
|
|
|
+ link.selectAll("line")
|
|
|
+ .style("stroke", function (d) { return linkScale(d.o.tq).hex() })
|
|
|
+
|
|
|
+ link.selectAll("title").text(function (d) { return showTq(d.o) })
|
|
|
+
|
|
|
+ return link
|
|
|
+ }
|
|
|
+
|
|
|
+ function updateNodes(vis, data) {
|
|
|
+ var node = vis.selectAll(".node")
|
|
|
+ .data(data, function(d) { return d.o.id })
|
|
|
+
|
|
|
+ node.exit().remove()
|
|
|
+
|
|
|
+ node.enter().append("circle")
|
|
|
+ .attr("r", 8)
|
|
|
+ .on("click", function (d) {
|
|
|
+ if (!d3.event.defaultPrevented)
|
|
|
+ router.node(d.o.node)()
|
|
|
+ })
|
|
|
+ .call(draggableNode)
|
|
|
+
|
|
|
+ node.attr("class", function (d) {
|
|
|
+ var s = ["node"]
|
|
|
+ if (!d.o.node)
|
|
|
+ s.push("unknown")
|
|
|
+
|
|
|
+ return s.join(" ")
|
|
|
+ })
|
|
|
+
|
|
|
+ return node
|
|
|
+ }
|
|
|
+
|
|
|
+ function updateLabels(vis, data) {
|
|
|
+ var label = vis.selectAll("text")
|
|
|
+ .data(data, function(d) { return d.o.id })
|
|
|
+
|
|
|
+ label.exit().remove()
|
|
|
+
|
|
|
+ var labelEnter = label.enter().append("text")
|
|
|
+
|
|
|
+ label.text(nodeName)
|
|
|
+ .each(function (d) {
|
|
|
+ var bbox = this.getBBox()
|
|
|
+ d.labelHeight = bbox.height
|
|
|
+ d.labelWidth = bbox.width
|
|
|
+ })
|
|
|
+
|
|
|
+ labelEnter.each(function (d) {
|
|
|
+ d.labelAngle = Math.PI / 2
|
|
|
+ })
|
|
|
+
|
|
|
+ return label
|
|
|
+ }
|
|
|
+
|
|
|
+ function positionLabels() {
|
|
|
+ label.attr("transform", function(d) {
|
|
|
+ var neighbours = d.neighbours.map(function (n) {
|
|
|
+ var dx = n.x - d.x
|
|
|
+ var dy = n.y - d.y
|
|
|
+
|
|
|
+ return (2 * Math.PI + Math.atan2(dy, dx)) % (2 * Math.PI)
|
|
|
+ })
|
|
|
+
|
|
|
+ var sumCos = neighbours.reduce(function (a, b) {
|
|
|
+ return a + Math.cos(b)
|
|
|
+ }, 0)
|
|
|
+
|
|
|
+ var sumSin = neighbours.reduce(function (a, b) {
|
|
|
+ return a + Math.sin(b)
|
|
|
+ }, 0)
|
|
|
+
|
|
|
+ if (neighbours.length > 0)
|
|
|
+ d.labelAngle = Math.PI + Math.atan2(sumSin, sumCos)
|
|
|
+
|
|
|
+ var offset = 10
|
|
|
+
|
|
|
+ var a = offset + d.labelWidth / 2
|
|
|
+ var b = offset + d.labelHeight / 2
|
|
|
+
|
|
|
+ var cos = Math.cos(d.labelAngle)
|
|
|
+ var sin = Math.sin(d.labelAngle)
|
|
|
+
|
|
|
+ var x = d.x + a * Math.pow(Math.abs(cos), 2 / 5) * Math.sign(cos)
|
|
|
+ var y = d.y + b * Math.pow(Math.abs(sin), 2 / 5) * Math.sign(sin)
|
|
|
+
|
|
|
+ return "translate(" + x + "," + y + ")"
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
function tickEvent() {
|
|
|
link.selectAll("line")
|
|
|
.attr("x1", function(d) { return d.source.x })
|
|
@@ -148,9 +259,9 @@ define(["d3"], function (d3) {
|
|
|
.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 })
|
|
|
+ node.attr("cx", function (d) { return d.x })
|
|
|
+ .attr("cy", function (d) { return d.y })
|
|
|
+ positionLabels()
|
|
|
}
|
|
|
|
|
|
el = document.createElement("div")
|
|
@@ -168,26 +279,23 @@ define(["d3"], function (d3) {
|
|
|
|
|
|
vis = svg.append("g")
|
|
|
|
|
|
- vis.append("g").attr("class", "links")
|
|
|
- vis.append("g").attr("class", "nodes")
|
|
|
+ var visLinks = vis.append("g").attr("class", "links")
|
|
|
+ var visLabels = vis.append("g").attr("class", "labels")
|
|
|
+ var visNodes = vis.append("g").attr("class", "nodes")
|
|
|
|
|
|
force = d3.layout.force()
|
|
|
- .charge(-70)
|
|
|
- .gravity(0.05)
|
|
|
+ .charge(-80)
|
|
|
+ .gravity(0.01)
|
|
|
+ .chargeDistance(8 * LINK_DISTANCE)
|
|
|
.linkDistance(LINK_DISTANCE)
|
|
|
.linkStrength(function (d) {
|
|
|
- return 1 / d.o.tq
|
|
|
+ return Math.max(0.5, 1 / d.o.tq)
|
|
|
})
|
|
|
.on("tick", tickEvent)
|
|
|
.on("end", savePositions)
|
|
|
|
|
|
panzoom()
|
|
|
|
|
|
- var draggableNode = d3.behavior.drag()
|
|
|
- .on("dragstart", dragstart)
|
|
|
- .on("drag", dragmove)
|
|
|
- .on("dragend", dragend)
|
|
|
-
|
|
|
self.setData = function (data) {
|
|
|
var oldNodes = {}
|
|
|
|
|
@@ -235,26 +343,24 @@ define(["d3"], function (d3) {
|
|
|
return e
|
|
|
})
|
|
|
|
|
|
- link = vis.select("g.links")
|
|
|
- .selectAll("g.link")
|
|
|
- .data(intLinks, function (d) { return d.o.id })
|
|
|
-
|
|
|
- link.exit().remove()
|
|
|
-
|
|
|
- var linkEnter = link.enter().append("g")
|
|
|
- .attr("class", "link")
|
|
|
- .on("click", function (d) {
|
|
|
- if (!d3.event.defaultPrevented)
|
|
|
- router.link(d.o)()
|
|
|
- })
|
|
|
+ intNodes.forEach(function (d) {
|
|
|
+ d.neighbours = {}
|
|
|
+ })
|
|
|
|
|
|
- linkEnter.append("line")
|
|
|
- .append("title")
|
|
|
+ intLinks.forEach(function (d) {
|
|
|
+ d.source.neighbours[d.target.o.id] = d.target
|
|
|
+ d.target.neighbours[d.source.o.id] = d.source
|
|
|
+ })
|
|
|
|
|
|
- link.selectAll("line")
|
|
|
- .style("stroke", function (d) { return linkScale(d.o.tq).hex() })
|
|
|
+ intNodes.forEach(function (d) {
|
|
|
+ d.neighbours = Object.keys(d.neighbours).map(function (k) {
|
|
|
+ return d.neighbours[k]
|
|
|
+ })
|
|
|
+ })
|
|
|
|
|
|
- link.selectAll("title").text(function (d) { return showTq(d.o) })
|
|
|
+ link = updateLinks(visLinks, intLinks)
|
|
|
+ node = updateNodes(visNodes, intNodes)
|
|
|
+ label = updateLabels(visLabels, intNodes)
|
|
|
|
|
|
linksDict = {}
|
|
|
|
|
@@ -263,28 +369,6 @@ define(["d3"], function (d3) {
|
|
|
linksDict[d.o.id] = d
|
|
|
})
|
|
|
|
|
|
- node = vis.select("g.nodes")
|
|
|
- .selectAll(".node")
|
|
|
- .data(intNodes, function(d) { return d.o.id })
|
|
|
-
|
|
|
- node.exit().remove()
|
|
|
-
|
|
|
- var nodeEnter = node.enter().append("circle")
|
|
|
- .attr("r", 8)
|
|
|
- .on("click", function (d) {
|
|
|
- if (!d3.event.defaultPrevented)
|
|
|
- router.node(d.o.node)()
|
|
|
- })
|
|
|
- .call(draggableNode)
|
|
|
-
|
|
|
- node.attr("class", function (d) {
|
|
|
- var s = ["node"]
|
|
|
- if (!d.o.node)
|
|
|
- s.push("unknown")
|
|
|
-
|
|
|
- return s.join(" ")
|
|
|
- })
|
|
|
-
|
|
|
nodesDict = {}
|
|
|
|
|
|
node.each( function (d) {
|
|
@@ -292,8 +376,6 @@ define(["d3"], function (d3) {
|
|
|
nodesDict[d.o.node.nodeinfo.node_id] = d
|
|
|
})
|
|
|
|
|
|
- nodeEnter.append("title")
|
|
|
-
|
|
|
if (localStorageTest()) {
|
|
|
var save = JSON.parse(localStorage.getItem("graph/nodeposition"))
|
|
|
|
|
@@ -303,8 +385,8 @@ define(["d3"], function (d3) {
|
|
|
nodePositions[d.id] = d
|
|
|
})
|
|
|
|
|
|
- nodeEnter.each( function (d) {
|
|
|
- if (nodePositions[d.o.id]) {
|
|
|
+ node.each( function (d) {
|
|
|
+ if (nodePositions[d.o.id] && (d.x === undefined || d.y === undefined)) {
|
|
|
d.x = nodePositions[d.o.id].x
|
|
|
d.y = nodePositions[d.o.id].y
|
|
|
}
|
|
@@ -312,8 +394,6 @@ define(["d3"], function (d3) {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- node.selectAll("title").text(nodeName)
|
|
|
-
|
|
|
var diameter = graphDiameter(intNodes)
|
|
|
|
|
|
force.nodes(intNodes)
|