Merge branch 'main' of...

Merge branch 'main' of https://gitlab.rrz.uni-hamburg.de/bax9187/projekt-cis-biochemie-2021-22 into main

Merge branch 'main' of...
976d1096 · Katja · 1bad5144 · b49cdb94 · 976d1096
Commit 976d1096 authored 3 years ago by Katja
--- a/Output/index.html
+++ b/Output/index.html
@@ -5,19 +5,41 @@
  <!---  <meta http-equiv="X-UA-Compatible" content="IE=edge">-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
+
+body {width: 1000px;}
+
        .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>
 <body>
 <p id="id"></p>  <!--for commenting with document.getElementById("id").innerHTML = "text"; -->
-<svg width="960" height="600"></svg>
+
+<svg width="960" height="500"></svg>

 <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ücksetzbutton -->
+<button type="button" onclick="reset()">Neuladen</button> 
+
 <script type="text/javascript">
 //    var colors = d3.scaleOrdinal(d3.schemeCategory10);
    
@@ -40,7 +62,8 @@
        height = +svg.attr("height"),
        node,
        link,
-      //  groups; //not used?
+        initial_x,
+        initial_y,
        r=12;

    svg.append('defs').append('marker')//arrowhead
@@ -121,6 +144,7 @@
            .call(d3.drag()
                    .on("start", dragstarted)
                    .on("drag", dragged)
+//                    .on("end", dragended)
            );


@@ -192,7 +216,9 @@


                textfunc(d,h);
-            });
+            })
+//            .attr("initial_x", function (d) { return d.x })   für reset()
+//            .attr("initial_y", function (d) { return d.y });

        simulation
            .nodes(nodes)
@@ -266,7 +292,17 @@
        d.fy = d3.event.y;
    }

+    /* für reset()
+    function dragended(d) {
+    //    if (!d3.event.active) simulation.alphaTarget(0);
+    //    d.fx = undefined;
+    //    d.fy = undefined;
+        d.x = d.initial_x;
+        d.y = d.initial_y;
+    }
+*/

+// Zoom-Funktionen
 function zoom_actions(){
    g.attr("transform", d3.event.transform)
 }
@@ -285,9 +321,23 @@ function tickActions() {
        .attr("y2", function(d) { return d.target.y; });
 } 

+// Zurücksetzen-Funktion (noch fehlerhaft: Zoom!)
+function reset(){
+    d3.selectAll(".node").remove();
+    d3.selectAll(".link").remove();
+
+    d3.json("data.json", function (error, graph) {
+    if (error) throw error;
+    update(graph.links, graph.nodes);
+    })}

+// Ansatz 2 Zurücksetzen-Funktion
+//function reset(){
+//    d3.selectAll(".node").each(function(d) {dragended(d)})}


+// Event listener
+//d3.select("#Zurücksetzen").on("input", reset )
 </script>

 </body>