Skip to content
Snippets Groups Projects
Commit e84d40d8 authored by Merle's avatar Merle
Browse files

Zoom

parent 5bfc20a9
No related branches found
No related tags found
2 merge requests!10Output,!9Main
Hide whitespace changes
Inline Side-by-side
Showing
with 71 additions and 13 deletions
Output/index.html
+ 71
− 13
View file @ e84d40d8
...@@ -9,6 +9,10 @@ ...@@ -9,6 +9,10 @@
.link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; } .link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; }
</style> </style>
<!-- Rücksetzbutton
<button type="button" onclick="reset()">Zurücksetzen</button> -->
<link rel="shortcut icon" href="#"> <link rel="shortcut icon" href="#">
</head> </head>
<body> <body>
...@@ -34,7 +38,9 @@ ...@@ -34,7 +38,9 @@
height = +svg.attr("height"), height = +svg.attr("height"),
node, node,
link, link,
groups; groups,
x_coord,
y_coord;
r=5; r=5;
svg.append('defs').append('marker')//arrowhead svg.append('defs').append('marker')//arrowhead
...@@ -60,13 +66,30 @@ ...@@ -60,13 +66,30 @@
.force("center", d3.forceCenter(width / 2, height / 2)) .force("center", d3.forceCenter(width / 2, height / 2))
.force("x", d3.forceX().strength(0.5).x( function(d){ return x(d.group) } )); .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) { d3.json("data.json", function (error, graph) {
if (error) throw error; if (error) throw error;
update(graph.links, graph.nodes); update(graph.links, graph.nodes);
}) })
function update(links, nodes) { function update(links, nodes) {
link = svg.selectAll(".link") link = g.append("g") // Hinzufügen zu Zoom-Gruppe
.selectAll(".link")
.data(links) .data(links)
.enter() .enter()
.append("line") .append("line")
...@@ -110,7 +133,8 @@ ...@@ -110,7 +133,8 @@
.text(function (d) {return d.author}); .text(function (d) {return d.author});
*/ */
node = svg.selectAll(".node") node = g.append("g") // Zoom
.selectAll(".node")
.data(nodes) .data(nodes)
.enter() .enter()
.append("g") .append("g")
...@@ -119,12 +143,8 @@ ...@@ -119,12 +143,8 @@
.on("start", dragstarted) .on("start", dragstarted)
.on("drag", dragged) .on("drag", dragged)
//.on("end", dragended) //.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; var toRemove;
...@@ -137,10 +157,14 @@ var toRemove; ...@@ -137,10 +157,14 @@ var toRemove;
.on('click', function() { .on('click', function() {
if(toRemove){ if(toRemove){
d3.select(toRemove).selectAll(".circle").attr("r", r); d3.select(toRemove).selectAll(".circle").attr("r", r);
d3.select("p").remove();
} }
toRemove = this.parentNode; toRemove = this.parentNode;
d3.select(this).attr("r", 12); 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(){ /* .on("click", function(){
...@@ -159,12 +183,14 @@ var toRemove; ...@@ -159,12 +183,14 @@ var toRemove;
.style('pointer-events', 'auto') .style('pointer-events', 'auto')
.on('click', function() { .on('click', function() { // Click-Funktion Text
if(toRemove){ if(toRemove){
d3.select(toRemove).selectAll(".circle").attr("r", r); d3.select(toRemove).selectAll(".circle").attr("r", r);
//d3.select("p").remove();
} }
toRemove = this.parentNode; toRemove = this.parentNode;
d3.select(this.parentNode).selectAll(".circle").attr("r", 12); d3.select(this.parentNode).selectAll(".circle").attr("r", 12);
//d3.select("body").append("p").text("Text");
}); });
simulation simulation
...@@ -223,9 +249,41 @@ var toRemove; ...@@ -223,9 +249,41 @@ var toRemove;
// d.fy = undefined; // 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> </script>
......
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