Reset-Buttons

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
+Erledigt:
+- Graphstruktur mit Knoten und Kanten (+ Schnittstelle mit Verarbeitung (Json))
+- 3 senkrechte Schichten für Input, Citing und Cited (+ Farben)
+- Scroll- und Schiebefunktionen des gesamten Graphen
+- Zoom- und Schiebefunktionen des gesamten Graphen
+- Schiebefunktionen der einzelnen Knoten
+- Hover-Text mit den zugehörigen Informationen von den Knoten
+- Informationsfenster auf Klick geöffnet
+- Hervorhebung von Knoten und deren verbundenen Kanten auf Klick
+- Knopf zum Zurücksetzen der Graphstruktur
+- Knopf zum Zurücksetzen der Zoom-Funktion
+- Knopf zum Zurücksetzen der Schiebe-Funktion
+
+Noch offen:
+- Strukturierung und Kommentierung des Codes verbessern
+- Informationsfenster an sehr lange Titel anpassen
+- Überlagerung von Graph und Informationsfenster verhindern
+- Zurücksetzen der Markierungsfunktion
+- Speicherfunktion (?)

Output/index.html

@@ -8,6 +8,20 @@
         .node {}
 
         .link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; }
+
+        /*
+        button {
+        width: 150px;
+        font-size: 15px;
+        padding: 7px;
+        border-radius: 3px;
+        border: 3px solid #999;
+        color: black;
+        cursor: pointer;
+        position : absolute;
+        top: 500px;
+        right: 550px;
+        } */
     </style>
     <link rel="shortcut icon" href="#">
 </head>
@@ -18,6 +32,12 @@
 <script src="https://d3js.org/d3.v4.min.js" type="text/javascript"></script>
 <script src="https://d3js.org/d3-selection-multi.v1.js"></script>
 
+<!-- Rücksetzbuttons -->
+<button onclick="javascript:location.reload();">Reload</button>
+<button onclick="resetGraph()">Reset graph</button>
+<button onclick="resetZoom()">Reset zoom</button>
+<button onclick="center()">Center</button>
+
 <script type="text/javascript">
 //    var colors = d3.scaleOrdinal(d3.schemeCategory10);
     
@@ -40,7 +60,6 @@
         height = +svg.attr("height"),
         node,
         link,
-      //  groups; //not used?
         r=12;
 
     svg.append('defs').append('marker')//arrowhead
@@ -72,7 +91,6 @@
         .attr('d', 'M 0,-5 L 10 ,0 L 0,5')
         .attr('fill', 'black')//arrowhead color
         .style('stroke','none');
-        
 
     var simulation = d3.forceSimulation()
         .force("link", d3.forceLink().id(function (d) { return d.doi; }).distance(100).strength(1))
@@ -82,15 +100,18 @@
      //   .force("x", d3.forceX().strength(0.5).x( function(d){ return x(d.group) } ));
         .force("yscale", d3.forceY().strength(1).y( function(d){ return yscale(d.group) } ));
 
-
-    var g = svg.append("g")
-        .attr("class", "everything");
-
     // Hinzufügen der Zoom-Fähigkeiten
-    var zoom_handler = d3.zoom()
+    var zoom = d3.zoom()
+        //.scaleExtent([0.25, 10])
         .on("zoom", zoom_actions);
 
-    zoom_handler(svg);   
+    //d3.select('svg').call(zoom);
+    zoom(svg);  
+
+    var g = svg.append("g")
+        .attr("class", "everything")
+        //.call(zoom);
+ 
 
     d3.json("data.json", function (error, graph) {
         if (error) throw error;
@@ -121,7 +142,9 @@
             .call(d3.drag()
                     .on("start", dragstarted)
                     .on("drag", dragged)
-            );
+            )
+            .attr("initial_x", function(d) {return d.dx;})
+            .attr("initial_y", function(d) {return d.dy;});
 
 
 
@@ -268,9 +291,9 @@
 
 
 function zoom_actions(){
-    g.attr("transform", d3.event.transform)
+    d3.select('g').attr("transform", d3.event.transform)
 }
-
+/* unn"otig?
 function tickActions() {
     //update circle positions each tick of the simulation 
        node
@@ -284,9 +307,26 @@ function tickActions() {
         .attr("x2", function(d) { return d.target.x; })
         .attr("y2", function(d) { return d.target.y; });
 } 
+*/
 
+function resetZoom() {
+	d3.select('svg')
+		.transition()
+		.call(zoom.scaleTo, 1);
+}
 
+function center() {
+	d3.select('svg')
+		.transition()
+		.call(zoom.translateTo, 0.5 * width, 0.5 * height);
+}
 
+function resetGraph(){
+    d3.selectAll(".node").each(function(d) {
+        d.fx = d.initial_x;
+        d.fy = d.initial_y;
+    })
+}
 
 </script>