Hawkin
/
arangodb
mirror of https://gitee.com/bigwinds/arangodb
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

GraphViewer: Added lib for fish-eye view, and started adaption of edgeShaper

This commit is contained in:
Michael Hackstein 2013-04-24 09:18:57 +02:00
parent fb09253e86
commit de359bf07d
3 changed files with 292 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
html/admin/js/graphViewer/graph/edgeShaper.js
View File

@ -107,14 +107,14 @@ function EdgeShaper(parent, flags, idfunc) {
addPosition = function (line, g) { addPosition = function (line, g) {
g.attr("transform", function(d) { g.attr("transform", function(d) {
return "translate(" return "translate("
+ d.source.x + ", " + d.source.position.x + ", "
+ d.source.y + ")" + d.source.position.y + ")"
+ "rotate(" + "rotate("
+ getCorner(d.source, d.target) + getCorner(d.source.position, d.target.position)
+ ")"; + ")";
}); });
line.attr("x2", function(d) { line.attr("x2", function(d) {
return getDistance(d.source, d.target); return getDistance(d.source.position, d.target.position);
}); });
}, },
@ -206,7 +206,7 @@ function EdgeShaper(parent, flags, idfunc) {
edges.select("text") edges.select("text")
.attr("transform", function(d) { .attr("transform", function(d) {
return "translate(" return "translate("
+ getDistance(d.source, d.target) / 2 + getDistance(d.source.position, d.target.position) / 2
+ ", -3)"; + ", -3)";
}); });
}; };

224
html/admin/js/graphViewer/jasmine_test/specEdgeShaper/edgeShaperSpec.js
View File

@ -38,10 +38,15 @@
describe('Edge Shaper', function() { describe('Edge Shaper', function() {
var svg; var svg, defaultPosition;
beforeEach(function () { beforeEach(function () {
svg = document.createElement("svg"); svg = document.createElement("svg");
defaultPosition = {
x: 1,
y: 1,
z: 1
};
document.body.appendChild(svg); document.body.appendChild(svg);
}); });
@ -52,10 +57,12 @@
it('should be able to draw an edge', function () { it('should be able to draw an edge', function () {
var source = { var source = {
"_id": 1 "_id": 1,
position: defaultPosition
}, },
target = { target = {
"_id": 2 "_id": 2,
position: defaultPosition
}, },
edges = [ edges = [
{ {
@ -72,16 +79,20 @@
it('should be able to draw many edges', function () { it('should be able to draw many edges', function () {
var one = { var one = {
"_id": 1 "_id": 1,
position: defaultPosition
}, },
two = { two = {
"_id": 2 "_id": 2,
position: defaultPosition
}, },
three = { three = {
"_id": 3 "_id": 3,
position: defaultPosition
}, },
four = { four = {
"_id": 4 "_id": 4,
position: defaultPosition
}, },
edges = [ edges = [
{ {
@ -108,16 +119,20 @@
it('should be able to add an event', function () { it('should be able to add an event', function () {
var one = { var one = {
"_id": 1 "_id": 1,
position: defaultPosition
}, },
two = { two = {
"_id": 2 "_id": 2,
position: defaultPosition
}, },
three = { three = {
"_id": 3 "_id": 3,
position: defaultPosition
}, },
four = { four = {
"_id": 4 "_id": 4,
position: defaultPosition
}, },
edges = [ edges = [
{ {
@ -159,16 +174,20 @@
it('should be able to unbind all events', function() { it('should be able to unbind all events', function() {
var one = { var one = {
"_id": 1 "_id": 1,
position: defaultPosition
}, },
two = { two = {
"_id": 2 "_id": 2,
position: defaultPosition
}, },
three = { three = {
"_id": 3 "_id": 3,
position: defaultPosition
}, },
four = { four = {
"_id": 4 "_id": 4,
position: defaultPosition
}, },
edges = [ edges = [
{ {
@ -216,10 +235,12 @@
it('should be able to add an arrow on target side', function() { it('should be able to add an arrow on target side', function() {
var one = { var one = {
"_id": 1 "_id": 1,
position: defaultPosition
}, },
two = { two = {
"_id": 2 "_id": 2,
position: defaultPosition
}, },
edges = [ edges = [
{ {
@ -244,28 +265,38 @@
it('should position the edges correctly', function() { it('should position the edges correctly', function() {
var center = { var center = {
_id: 1, _id: 1,
position: {
x: 20, x: 20,
y: 20 y: 20
}
}, },
NE = { NE = {
_id: 2, _id: 2,
position: {
x: 30, x: 30,
y: 10 y: 10
}
}, },
SE = { SE = {
_id: 3, _id: 3,
position: {
x: 40, x: 40,
y: 30 y: 30
}
}, },
SW = { SW = {
_id: 4, _id: 4,
position: {
x: 10, x: 10,
y: 40 y: 40
}
}, },
NW = { NW = {
_id: 5, _id: 5,
position: {
x: 0, x: 0,
y: 0 y: 0
}
}, },
edges = [ edges = [
{ {
@ -308,7 +339,15 @@
describe('testing for colours', function() { describe('testing for colours', function() {
it('should have a default colouring of no colour flag is given', function() { it('should have a default colouring of no colour flag is given', function() {
var nodes = [{_id: 1}, {_id: 2}], var nodes = [
{
_id: 1,
position: defaultPosition
}, {
_id: 2,
position: defaultPosition
}
],
edges = [{ edges = [{
source: nodes[0], source: nodes[0],
target: nodes[1] target: nodes[1]
@ -324,8 +363,14 @@
}); });
it('should be able to use the same colour for all edges', function() { it('should be able to use the same colour for all edges', function() {
var s = {_id: 1}, var s = {
t = {_id: 2}, _id: 1,
position: defaultPosition
},
t = {
_id: 2,
position: defaultPosition
},
edges = [{ edges = [{
source: s, source: s,
target: t target: t
@ -348,10 +393,22 @@
}); });
it('should be able to use a colour based on attribute value', function() { it('should be able to use a colour based on attribute value', function() {
var n1 = {_id: 1}, var n1 = {
n2 = {_id: 2}, _id: 1,
n3 = {_id: 3}, position: defaultPosition
n4 = {_id: 4}, },
n2 = {
_id: 2,
position: defaultPosition
},
n3 = {
_id: 3,
position: defaultPosition
},
n4 = {
_id: 4,
position: defaultPosition
},
edges = [{ edges = [{
source: n1, source: n1,
target: n2, target: n2,
@ -407,8 +464,14 @@
}); });
it('should be able to use a gradient colour', function() { it('should be able to use a gradient colour', function() {
var s = {_id: 1}, var s = {
t = {_id: 2}, _id: 1,
position: defaultPosition
},
t = {
_id: 2,
position: defaultPosition
},
edges = [{ edges = [{
source: s, source: s,
target: t target: t
@ -455,10 +518,12 @@
beforeEach(function() { beforeEach(function() {
var one = { var one = {
"_id": 1 "_id": 1,
position: defaultPosition
}, },
two = { two = {
"_id": 2 "_id": 2,
position: defaultPosition
}, },
edges = [ edges = [
{ {
@ -511,7 +576,24 @@
shaper; shaper;
beforeEach(function() { beforeEach(function() {
nodes = [{_id: 1}, {_id: 2}, {_id: 3}, {_id: 4}]; nodes = [
{
_id: 1,
position: defaultPosition
},
{
_id: 2,
position: defaultPosition
},
{
_id: 3,
position: defaultPosition
},
{
_id: 4,
position: defaultPosition
}
];
edges = [ edges = [
{_id: 1, source: nodes[0], target: nodes[1]}, {_id: 1, source: nodes[0], target: nodes[1]},
{_id: 2, source: nodes[1], target: nodes[2]}, {_id: 2, source: nodes[1], target: nodes[2]},
@ -589,7 +671,21 @@
}); });
it('should display the correct label', function() { it('should display the correct label', function() {
var nodes = [{"_id": 1}, {"_id": 2}, {"_id": 3}, {"_id": 4}], var nodes = [
{
"_id": 1,
position: defaultPosition
}, {
"_id": 2,
position: defaultPosition
}, {
"_id": 3,
position: defaultPosition
}, {
"_id": 4,
position: defaultPosition
}
],
edges = [ edges = [
{ {
"source": nodes[0], "source": nodes[0],
@ -634,14 +730,18 @@
var nodes = [ var nodes = [
{ {
_id: 1, _id: 1,
position: {
x: 20, x: 20,
y: 20 y: 20
}
}, },
{ {
_id: 2, _id: 2,
position: {
x: 100, x: 100,
y: 20 y: 20
} }
}
], ],
edges = [ edges = [
{ {
@ -658,7 +758,21 @@
}); });
it('should ignore other attributes', function() { it('should ignore other attributes', function() {
var nodes = [{"_id": 1}, {"_id": 2}, {"_id": 3}, {"_id": 4}], var nodes = [
{
"_id": 1,
position: defaultPosition
}, {
"_id": 2,
position: defaultPosition
}, {
"_id": 3,
position: defaultPosition
}, {
"_id": 4,
position: defaultPosition
}
],
edges = [ edges = [
{ {
"source": nodes[0], "source": nodes[0],
@ -698,7 +812,15 @@
}); });
it('should be able to switch to another label', function() { it('should be able to switch to another label', function() {
var nodes = [{"_id": 1}, {"_id": 2}], var nodes = [
{
"_id": 1,
position: defaultPosition
}, {
"_id": 2,
position: defaultPosition
}
],
edges = [ edges = [
{ {
"source": nodes[0], "source": nodes[0],
@ -746,7 +868,21 @@
}); });
it('should display the correct label', function() { it('should display the correct label', function() {
var nodes = [{"_id": 1}, {"_id": 2}, {"_id": 3}, {"_id": 4}], var nodes = [
{
"_id": 1,
position: defaultPosition
}, {
"_id": 2,
position: defaultPosition
}, {
"_id": 3,
position: defaultPosition
}, {
"_id": 4,
position: defaultPosition
}
],
edges = [ edges = [
{ {
"source": nodes[0], "source": nodes[0],
@ -782,7 +918,21 @@
beforeEach(function () { beforeEach(function () {
shaper = new EdgeShaper(d3.select("svg")); shaper = new EdgeShaper(d3.select("svg"));
nodes = [{"_id": 1}, {"_id": 2}, {"_id": 3}, {"_id": 4}]; nodes = [
{
"_id": 1,
position: defaultPosition
}, {
"_id": 2,
position: defaultPosition
}, {
"_id": 3,
position: defaultPosition
}, {
"_id": 4,
position: defaultPosition
}
];
edges = [ edges = [
{ {
"source": nodes[0], "source": nodes[0],
@ -873,10 +1023,12 @@
.append("g"), .append("g"),
shaper = new EdgeShaper(internalObject), shaper = new EdgeShaper(internalObject),
source = { source = {
"_id": 1 "_id": 1,
position: defaultPosition
}, },
target = { target = {
"_id": 2 "_id": 2,
position: defaultPosition
}, },
edges = [ edges = [
{ {

85
html/admin/js/lib/d3.fisheye.js Normal file
View File

@ -0,0 +1,85 @@
(function() {
d3.fisheye = {
scale: function(scaleType) {
return d3_fisheye_scale(scaleType(), 3, 0);
},
circular: function() {
var radius = 200,
distortion = 2,
k0,
k1,
focus = [0, 0];
function fisheye(d) {
var dx = d.x - focus[0],
dy = d.y - focus[1],
dd = Math.sqrt(dx * dx + dy * dy);
if (!dd || dd >= radius) return {x: d.x, y: d.y, z: 1};
var k = k0 * (1 - Math.exp(-dd * k1)) / dd * .75 + .25;
return {x: focus[0] + dx * k, y: focus[1] + dy * k, z: Math.min(k, 10)};
}
function rescale() {
k0 = Math.exp(distortion);
k0 = k0 / (k0 - 1) * radius;
k1 = distortion / radius;
return fisheye;
}
fisheye.radius = function(_) {
if (!arguments.length) return radius;
radius = +_;
return rescale();
};
fisheye.distortion = function(_) {
if (!arguments.length) return distortion;
distortion = +_;
return rescale();
};
fisheye.focus = function(_) {
if (!arguments.length) return focus;
focus = _;
return fisheye;
};
return rescale();
}
};
function d3_fisheye_scale(scale, d, a) {
function fisheye(_) {
var x = scale(_),
left = x < a,
range = d3.extent(scale.range()),
min = range[0],
max = range[1],
m = left ? a - min : max - a;
if (m == 0) m = max - min;
return (left ? -1 : 1) * m * (d + 1) / (d + (m / Math.abs(x - a))) + a;
}
fisheye.distortion = function(_) {
if (!arguments.length) return d;
d = +_;
return fisheye;
};
fisheye.focus = function(_) {
if (!arguments.length) return a;
a = +_;
return fisheye;
};
fisheye.copy = function() {
return d3_fisheye_scale(scale.copy(), d, a);
};
fisheye.nice = scale.nice;
fisheye.ticks = scale.ticks;
fisheye.tickFormat = scale.tickFormat;
return d3.rebind(fisheye, scale, "domain", "range");
}
}());