From cc7592d4d64206f966c121ae2641914dff4cb3fd Mon Sep 17 00:00:00 2001 From: luigser Date: Thu, 17 Dec 2015 20:37:55 +0100 Subject: [PATCH] graphs update --- datalets/graph-datalet/demo/demo-clustering-2.html | 34 ++++++++++++++++++++++++++++++++++ datalets/graph-datalet/demo/demo-clustering.html | 33 +++++++++++++++++++++++++++++++++ datalets/graph-datalet/graph-clustering-datalet.html | 585 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ datalets/graph-datalet/graph-datalet.html | 13 +++++++++++-- datalets/graph-datalet/graph-with-clustering-datalet.html | 544 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ datalets/graph-datalet/graph-with-clustering-datalet_.html | 516 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ datalets/graph-datalet/static/css/graphClusteringStyle.css | 22 ++++++++++++++++++++++ datalets/graph-datalet/static/css/graphStyle.css | 6 +++--- 8 files changed, 1748 insertions(+), 5 deletions(-) create mode 100644 datalets/graph-datalet/demo/demo-clustering-2.html create mode 100644 datalets/graph-datalet/demo/demo-clustering.html create mode 100644 datalets/graph-datalet/graph-clustering-datalet.html create mode 100644 datalets/graph-datalet/graph-with-clustering-datalet.html create mode 100644 datalets/graph-datalet/graph-with-clustering-datalet_.html create mode 100644 datalets/graph-datalet/static/css/graphClusteringStyle.css diff --git a/datalets/graph-datalet/demo/demo-clustering-2.html b/datalets/graph-datalet/demo/demo-clustering-2.html new file mode 100644 index 0000000..f42fec8 --- /dev/null +++ b/datalets/graph-datalet/demo/demo-clustering-2.html @@ -0,0 +1,34 @@ + + + + + Demo Graph with node clustering + + + + + +

Graph with clustering

+
+ + + + \ No newline at end of file diff --git a/datalets/graph-datalet/demo/demo-clustering.html b/datalets/graph-datalet/demo/demo-clustering.html new file mode 100644 index 0000000..d7ad05f --- /dev/null +++ b/datalets/graph-datalet/demo/demo-clustering.html @@ -0,0 +1,33 @@ + + + + + Demo Graph with node clustering + + + + + +

Graph with clustering

+ +
+ + + \ No newline at end of file diff --git a/datalets/graph-datalet/graph-clustering-datalet.html b/datalets/graph-datalet/graph-clustering-datalet.html new file mode 100644 index 0000000..bc56e07 --- /dev/null +++ b/datalets/graph-datalet/graph-clustering-datalet.html @@ -0,0 +1,585 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/datalets/graph-datalet/graph-datalet.html b/datalets/graph-datalet/graph-datalet.html index 58279e1..a9b8151 100755 --- a/datalets/graph-datalet/graph-datalet.html +++ b/datalets/graph-datalet/graph-datalet.html @@ -74,6 +74,9 @@ Example: --paper-fab-background:#9e9e9e; z-index: 1001; } + #dialog_content{ + padding : 10px; + } @@ -84,7 +87,7 @@ Example:

- cos +
cos
 @@ -203,6 +206,8 @@ Example: this.svg.selectAll(".link").attr("style", function(t){ return "stroke:" + t.color + }).attr("style", function(t){ + return "stroke-width:" + (t.size ? t.size : 1.0) + "px"; }); gnodes = this.svg.selectAll(".node").data(graph.nodes).enter().append("g").attr("class", function (t) { @@ -225,7 +230,10 @@ Example: return t.color ? "fill:" + t.color : !1 + "; stroke:white" }); - d3.selectAll('circle').attr("filter", function(t){return t.image ? 'url(#filter1)' : ""}); + d3.selectAll('circle').attr("filter", function(t){return t.image ? 'url(#filter1)' : ""}) + .selectAll('feImage') + .attr("xlink:href", function(t){ + return t.image ? t.image : "http://icons.iconarchive.com/icons/hopstarter/soft-scraps/256/User-Executive-Green-icon.png"}); //d3.selectAll(".drag").call(force.drag), svg.selectAll("g.fixed").call(text); d3.selectAll(".drag").call(force.drag), this.svg.selectAll("g.node").call(this.text); @@ -355,6 +363,7 @@ Example: g.nodes[0].y = this.height / 2; this.buildGraph(g);*/ + var json = JSON.stringify(this.data); var g = this.data; g.nodes[0].x = this.width / 2; g.nodes[0].y = this.height / 8; diff --git a/datalets/graph-datalet/graph-with-clustering-datalet.html b/datalets/graph-datalet/graph-with-clustering-datalet.html new file mode 100644 index 0000000..288e851 --- /dev/null +++ b/datalets/graph-datalet/graph-with-clustering-datalet.html @@ -0,0 +1,544 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/datalets/graph-datalet/graph-with-clustering-datalet_.html b/datalets/graph-datalet/graph-with-clustering-datalet_.html new file mode 100644 index 0000000..5e0efbf --- /dev/null +++ b/datalets/graph-datalet/graph-with-clustering-datalet_.html @@ -0,0 +1,516 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/datalets/graph-datalet/static/css/graphClusteringStyle.css b/datalets/graph-datalet/static/css/graphClusteringStyle.css new file mode 100644 index 0000000..c5b81a2 --- /dev/null +++ b/datalets/graph-datalet/static/css/graphClusteringStyle.css @@ -0,0 +1,22 @@ +#sbiricuda { + border: 1px solid #ccc; +} + +.node { + fill: lightsteelblue; + stroke: #FFFFFF; + stroke-width: 3px; +} +.leaf { + stroke: #fff; + stroke-width: 1.5px; +} +.hull { + fill: lightsteelblue; + fill-opacity: 0.3; +} +.link { + stroke: #333; + stroke-opacity: 0.5; + pointer-events: none; +} \ No newline at end of file diff --git a/datalets/graph-datalet/static/css/graphStyle.css b/datalets/graph-datalet/static/css/graphStyle.css index f6ab1b5..8e62053 100755 --- a/datalets/graph-datalet/static/css/graphStyle.css +++ b/datalets/graph-datalet/static/css/graphStyle.css @@ -1,5 +1,5 @@ circle{ - stroke-width: 2.5px; + stroke-width: 1.5px; } .text { @@ -11,8 +11,8 @@ circle{ cursor: pointer; fill: #fff; stroke: #FFFFFF; - stroke-width: 4.5px - z-index: 100; + stroke-width: 2.5px + z-index: 10; } .node.fixed { -- libgit2 0.21.4