From 7b867bdf61aeb5d77ffec4e13a8439a4a85634b6 Mon Sep 17 00:00:00 2001
From: Katja <bax5612@studium.uni-hamburg.de>
Date: Tue, 16 Nov 2021 16:45:49 +0100
Subject: [PATCH] highlight links and nodes on click
---
Output/index.html | 56 +++--------------------------------------------
1 file changed, 3 insertions(+), 53 deletions(-)
diff --git a/Output/index.html b/Output/index.html
index 8e5acbe..2bfd029 100644
--- a/Output/index.html
+++ b/Output/index.html
@@ -5,41 +5,19 @@
<!--- <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="500"></svg>
+<svg width="960" height="600"></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);
@@ -62,8 +40,7 @@ body {width: 1000px;}
height = +svg.attr("height"),
node,
link,
- initial_x,
- initial_y,
+ // groups; //not used?
r=12;
svg.append('defs').append('marker')//arrowhead
@@ -144,7 +121,6 @@ body {width: 1000px;}
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
-// .on("end", dragended)
);
@@ -216,9 +192,7 @@ body {width: 1000px;}
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)
@@ -292,17 +266,7 @@ body {width: 1000px;}
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)
}
@@ -321,23 +285,9 @@ 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>
--
GitLab