Skip to content
Snippets Groups Projects
Commit 7b867bdf authored by Katja's avatar Katja
Browse files

highlight links and nodes on click

parent 976d1096
No related branches found
No related tags found
2 merge requests!10Output,!9Main
Hide whitespace changes
Inline Side-by-side
Showing
with 3 additions and 53 deletions
Output/index.html
+ 3
− 53
View file @ 7b867bdf
...@@ -5,41 +5,19 @@ ...@@ -5,41 +5,19 @@
<!--- <meta http-equiv="X-UA-Compatible" content="IE=edge">--> <!--- <meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css"> <style type="text/css">
body {width: 1000px;}
.node {} .node {}
.link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; } .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> </style>
<link rel="shortcut icon" href="#"> <link rel="shortcut icon" href="#">
</head> </head>
<body> <body>
<p id="id"></p> <!--for commenting with document.getElementById("id").innerHTML = "text"; --> <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.v4.min.js" type="text/javascript"></script>
<script src="https://d3js.org/d3-selection-multi.v1.js"></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"> <script type="text/javascript">
// var colors = d3.scaleOrdinal(d3.schemeCategory10); // var colors = d3.scaleOrdinal(d3.schemeCategory10);
...@@ -62,8 +40,7 @@ body {width: 1000px;} ...@@ -62,8 +40,7 @@ body {width: 1000px;}
height = +svg.attr("height"), height = +svg.attr("height"),
node, node,
link, link,
initial_x, // groups; //not used?
initial_y,
r=12; r=12;
svg.append('defs').append('marker')//arrowhead svg.append('defs').append('marker')//arrowhead
...@@ -144,7 +121,6 @@ body {width: 1000px;} ...@@ -144,7 +121,6 @@ body {width: 1000px;}
.call(d3.drag() .call(d3.drag()
.on("start", dragstarted) .on("start", dragstarted)
.on("drag", dragged) .on("drag", dragged)
// .on("end", dragended)
); );
...@@ -216,9 +192,7 @@ body {width: 1000px;} ...@@ -216,9 +192,7 @@ body {width: 1000px;}
textfunc(d,h); textfunc(d,h);
}) });
// .attr("initial_x", function (d) { return d.x }) für reset()
// .attr("initial_y", function (d) { return d.y });
simulation simulation
.nodes(nodes) .nodes(nodes)
...@@ -292,17 +266,7 @@ body {width: 1000px;} ...@@ -292,17 +266,7 @@ body {width: 1000px;}
d.fy = d3.event.y; 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(){ function zoom_actions(){
g.attr("transform", d3.event.transform) g.attr("transform", d3.event.transform)
} }
...@@ -321,23 +285,9 @@ function tickActions() { ...@@ -321,23 +285,9 @@ function tickActions() {
.attr("y2", function(d) { return d.target.y; }); .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> </script>
</body> </body>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment