From e84d40d8577d971c005e40d1c10f65c02387f3ba Mon Sep 17 00:00:00 2001
From: Merle <merle@machu.fritz.box>
Date: Fri, 12 Nov 2021 17:58:21 +0100
Subject: [PATCH] Zoom
---
Output/index.html | 84 +++++++++++++++++++++++++++++++++++++++--------
1 file changed, 71 insertions(+), 13 deletions(-)
diff --git a/Output/index.html b/Output/index.html
index 09662f3..113498b 100644
--- a/Output/index.html
+++ b/Output/index.html
@@ -9,6 +9,10 @@
.link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; }
</style>
+
+ <!-- Rücksetzbutton
+ <button type="button" onclick="reset()">Zurücksetzen</button> -->
+
<link rel="shortcut icon" href="#">
</head>
<body>
@@ -34,7 +38,9 @@
height = +svg.attr("height"),
node,
link,
- groups;
+ groups,
+ x_coord,
+ y_coord;
r=5;
svg.append('defs').append('marker')//arrowhead
@@ -60,13 +66,30 @@
.force("center", d3.forceCenter(width / 2, height / 2))
.force("x", d3.forceX().strength(0.5).x( function(d){ return x(d.group) } ));
+// Zoom+Drag Funktion
+ // Gruppe für den Zoom
+ var g = svg.append("g")
+ .attr("class", "everything");
+
+ // Hinzufügen der Zoom-Fähigkeiten
+ var zoom_handler = d3.zoom()
+ .on("zoom", zoom_actions);
+
+ zoom_handler(svg);
+
+// Textbox (d3-plus + textBox, Rechteck und dann Text an gleiche Stelle ?)
+//d3.select("body").append("p");
+//d3.select("body").append("p").text("Third paragraph.");
+
+
d3.json("data.json", function (error, graph) {
if (error) throw error;
update(graph.links, graph.nodes);
})
function update(links, nodes) {
- link = svg.selectAll(".link")
+ link = g.append("g") // Hinzufügen zu Zoom-Gruppe
+ .selectAll(".link")
.data(links)
.enter()
.append("line")
@@ -110,7 +133,8 @@
.text(function (d) {return d.author});
*/
- node = svg.selectAll(".node")
+ node = g.append("g") // Zoom
+ .selectAll(".node")
.data(nodes)
.enter()
.append("g")
@@ -119,12 +143,8 @@
.on("start", dragstarted)
.on("drag", dragged)
//.on("end", dragended)
- //.style("fill", function(d){ return color(d.group)})
- );
- //node.append("group")
- // .text(function (d) {return d.group;})
-
- //groups = d3.group(node, d => d.group)
+ )
+ ;
var toRemove;
@@ -137,10 +157,14 @@ var toRemove;
.on('click', function() {
if(toRemove){
d3.select(toRemove).selectAll(".circle").attr("r", r);
+ d3.select("p").remove();
}
toRemove = this.parentNode;
d3.select(this).attr("r", 12);
- });
+ d3.select("body").append("p").text("Text")
+ .attr("x_coord", copy(function(d){ return d.x}))
+ .attr("y_coord", copy(function(d){ return d.x}));
+ })
/* .on("click", function(){
@@ -159,12 +183,14 @@ var toRemove;
.style('pointer-events', 'auto')
- .on('click', function() {
+ .on('click', function() { // Click-Funktion Text
if(toRemove){
d3.select(toRemove).selectAll(".circle").attr("r", r);
+ //d3.select("p").remove();
}
toRemove = this.parentNode;
d3.select(this.parentNode).selectAll(".circle").attr("r", 12);
+ //d3.select("body").append("p").text("Text");
});
simulation
@@ -223,9 +249,41 @@ var toRemove;
// d.fy = undefined;
// }
+//Zoom Funktionen
+function zoom_actions(){
+ g.attr("transform", d3.event.transform)
+}
-
-
+function tickActions() {
+ //update circle positions each tick of the simulation
+ node
+ .attr("cx", function(d) { return d.x; })
+ .attr("cy", function(d) { return d.y; });
+
+ //update link positions
+ link
+ .attr("x1", function(d) { return d.source.x; })
+ .attr("y1", function(d) { return d.source.y; })
+ .attr("x2", function(d) { return d.target.x; })
+ .attr("y2", function(d) { return d.target.y; });
+}
+
+/*
+// Zurücksetzen-Funktion
+function reset() {
+ d3.selectAll(nodes).attr("x", x_coord);
+ d3.selectAll(nodes).attr("y", y_coord);
+// node
+// .attr("x", function(d) { return d.x_coord; })
+// .attr("y", function(d) { return d.y_coord; });
+
+ link
+ .attr("x1", function(d) { return d.source.x; })
+ .attr("y1", function(d) { return d.source.y; })
+ .attr("x2", function(d) { return d.target.x; })
+ .attr("y2", function(d) { return d.target.y; });
+}
+*/
</script>
--
GitLab