Grouping

Output/ToDo.txt

+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

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){