diff --git a/Output/index.html b/Output/index.html
index 1b0fd9612d0d809f6f7e672160a09b328b3ac90a..44838e01c15948dccd316b26c7d4127d9bce3f40 100644
--- 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
@@ -106,6 +129,7 @@
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
+// .on("end", dragended)
);
@@ -156,7 +180,9 @@
toRemove = this.parentNode;
d3.select(this.parentNode).selectAll(".circle").attr("r", 30)
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)
@@ -221,7 +247,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)
}
@@ -240,9 +276,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>