From 5bfc20a9c8e610b4f48f58aefac4a6aa4e82325b Mon Sep 17 00:00:00 2001
From: Merle Stahl <merle.stahl@studium.uni-hamburg.de>
Date: Tue, 9 Nov 2021 20:03:46 +0100
Subject: [PATCH] Grouping
---
Output/ToDo.txt | 9 +++++++++
Output/index.html | 25 ++++++++++++++++++++-----
2 files changed, 29 insertions(+), 5 deletions(-)
create mode 100644 Output/ToDo.txt
diff --git a/Output/ToDo.txt b/Output/ToDo.txt
new file mode 100644
index 0000000..9dad2d6
--- /dev/null
+++ b/Output/ToDo.txt
@@ -0,0 +1,9 @@
+TO-DO:
+- Hovertext in Textbox beim Anklicken (?)
+- Schnittstelle (Json)
+- 3 Schichten im Graph (?)
+- Gruppen mit Farben
+- allgemeines Design
+- Knoten ziehen
+- Rein- und Rauszoomen (?)
+- Knopf zum Zurücksetzen
diff --git a/Output/index.html b/Output/index.html
index 23ddb58..09662f3 100644
--- a/Output/index.html
+++ b/Output/index.html
@@ -19,13 +19,22 @@
<script src="https://d3js.org/d3-selection-multi.v1.js"></script>
<script type="text/javascript">
- var colors = d3.scaleOrdinal(d3.schemeCategory10);
+// var colors = d3.scaleOrdinal(d3.schemeCategory10);
+// Farbgruppen
+ var color = d3.scaleOrdinal()
+ .domain(["citing", "input", "cited"])
+ .range([ "#F8766D", "#00BA38", "#619CFF"])
+
+ var x = d3.scaleOrdinal()
+ .domain(["citing", "input", "cited"])
+ .range([50, 200, 340])
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
node,
- link;
+ link,
+ groups;
r=5;
svg.append('defs').append('marker')//arrowhead
@@ -48,7 +57,8 @@
.force("link", d3.forceLink().id(function (d) { return d.doi; }).distance(100).strength(1))
.force("collide", d3.forceCollide(r+35))
.force("charge", d3.forceManyBody().strength(-30))
- .force("center", d3.forceCenter(width / 2, height / 2));
+ .force("center", d3.forceCenter(width / 2, height / 2))
+ .force("x", d3.forceX().strength(0.5).x( function(d){ return x(d.group) } ));
d3.json("data.json", function (error, graph) {
if (error) throw error;
@@ -109,15 +119,20 @@
.on("start", dragstarted)
.on("drag", dragged)
//.on("end", dragended)
+ //.style("fill", function(d){ return color(d.group)})
);
+ //node.append("group")
+ // .text(function (d) {return d.group;})
+
+ //groups = d3.group(node, d => d.group)
var toRemove;
node.append("circle")
.attr("r", r)
.attr("class", "circle")
- .style("fill", function (d, i) {return colors(i);})
-
+ //.style("fill", function (d, i) {return colors(i);})
+ .style("fill", function(d){ return color(d.group)})
.on('click', function() {
if(toRemove){
--
GitLab