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 @@
.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>
......
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