From 4551732cba2edf7d6e63a90d8c7e004a744517f1 Mon Sep 17 00:00:00 2001
From: Katja <bax5612@studium.uni-hamburg.de>
Date: Fri, 12 Nov 2021 18:19:42 +0100
Subject: [PATCH] zoom und text zusammen yay
---
Output/index.html | 188 ++++++++++++++++++----------------------------
1 file changed, 73 insertions(+), 115 deletions(-)
diff --git a/Output/index.html b/Output/index.html
index 113498b..1b0fd96 100644
--- a/Output/index.html
+++ b/Output/index.html
@@ -2,17 +2,13 @@
<html lang="en">
<head>
<meta charset="utf-8">
- <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">
<style type="text/css">
.node {}
.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>
@@ -24,34 +20,38 @@
<script type="text/javascript">
// var colors = d3.scaleOrdinal(d3.schemeCategory10);
+
// Farbgruppen
var color = d3.scaleOrdinal()
.domain(["citing", "input", "cited"])
- .range([ "#F8766D", "#00BA38", "#619CFF"])
+ //.range([ "#F8766D", "#00BA38", "#619CFF"])
+ .range([' #01d7c0', ' #8b90fe ', ' #01cd2f '])
+
+ /* var x = d3.scaleOrdinal()
+ .domain(["citing", "input", "cited"])
+ .range([10, 200, 340])*/
- var x = d3.scaleOrdinal()
+ var yscale = d3.scaleOrdinal()
.domain(["citing", "input", "cited"])
- .range([50, 200, 340])
+ .range([0, 200, 400])
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
node,
link,
- groups,
- x_coord,
- y_coord;
- r=5;
+ // groups; //not used?
+ r=12;
svg.append('defs').append('marker')//arrowhead
.attrs({'id':'arrowhead',
'viewBox':'-0 -5 10 10',
- 'refX':13,
+ 'refX':r+10,
'refY':0,
'orient':'auto',
'markerWidth':10,
- 'markerHeight':13,
+ 'markerHeight':15,
'xoverflow':'visible'})
.append('svg:path')
.attr('d', 'M 0,-5 L 10 ,0 L 0,5')
@@ -61,34 +61,29 @@
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function (d) { return d.doi; }).distance(100).strength(1))
- .force("collide", d3.forceCollide(r+35))
+ .force("collide", d3.forceCollide(50))
.force("charge", d3.forceManyBody().strength(-30))
.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) } ));
+ .force("yscale", d3.forceY().strength(1).y( function(d){ return yscale(d.group) } ));
+
-// Zoom+Drag Funktion
- // Gruppe für den Zoom
var g = svg.append("g")
- .attr("class", "everything");
+ .attr("class", "everything");
// Hinzufügen der Zoom-Fähigkeiten
var zoom_handler = d3.zoom()
- .on("zoom", zoom_actions);
+ .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 = g.append("g") // Hinzufügen zu Zoom-Gruppe
+ link = g.append("g")
.selectAll(".link")
.data(links)
.enter()
@@ -101,37 +96,6 @@
link.append("title")
.text(function (d) {return d.author;});
- /* edgepaths = svg.selectAll(".edgepath")
- .data(links)
- .enter()
- .append('path')
- .attrs({
- 'class': 'edgepath',
- 'fill-opacity': 0,
- 'stroke-opacity': 0,
- 'id': function (d, i) {return 'edgepath' + i}
- })
- .style("pointer-events", "none");*/
-
- /* edgelabels = svg.selectAll(".edgelabel")
- .data(links)
- .enter()
- .append('text')
- .style("pointer-events", "none")
- .attrs({
- 'class': 'edgelabel',
- 'id': function (d, i) {return 'edgelabel' + i},
- 'font-size': 10,
- 'fill': '#aaa'
- });
-
- edgelabels.append('textPath')
- .attr('xlink:href', function (d, i) {return '#edgepath' + i})
- .style("text-anchor", "middle")
- .style("pointer-events", "none")
- .attr("startOffset", "50%")
- .text(function (d) {return d.author});
- */
node = g.append("g") // Zoom
.selectAll(".node")
@@ -142,55 +106,56 @@
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
- //.on("end", dragended)
- )
- ;
+ );
+
-var toRemove;
+ var h = svg.append('g').attr("transform" ,"scale(0)");
+ rect = h.append('rect')
+ .attr('width', 300)
+ .attr('height', 90)
+ .attr('x', width-310)
+ .attr('y', 10)
+ .style('fill', 'none')
+ .attr('stroke', 'none')
+ h.transition().duration(500).attr("transform" ,"scale(1)");
+ var toRemove;
+
node.append("circle")
.attr("r", r)
.attr("class", "circle")
//.style("fill", function (d, i) {return colors(i);})
.style("fill", function(d){ return color(d.group)})
+ //.style("stroke", "red")
- .on('click', function() {
+ .on('click', function(d) {
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}));
+ d3.select(this).attr("r", 30)
+ textfunc(d,h)
})
- /* .on("click", function(){
- d3.select(this).attr('r', r+5)
- //.style("fill","lightcoral")
- });*/
node.append("title")
.text(function (d) {return "Title: "+d.name+"\nAuthor: "+d.author+"\nYear: "+d.year+"\ndoi: "+d.doi;});
node.append("text")
- //.attr("dy", -30)
.attr("class", "text") //über selectAll(".text") können objs mit der klasse ausgewählt werden
.style("font-size", "15px")
.text(function (d) {return d.author;})
.style('pointer-events', 'auto')
- .on('click', function() { // Click-Funktion Text
+ .on('click', function(d) {
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");
+ d3.select(this.parentNode).selectAll(".circle").attr("r", 30)
+ textfunc(d,h);
});
simulation
@@ -201,7 +166,36 @@ var toRemove;
.links(links);
}
-
+ function textfunc(d,h){
+ d3.selectAll("foreignObject").remove()
+
+ rect.attr('stroke', 'black')
+ h.append('foreignObject')
+ .attr('x', width-300)
+ .attr('y', 15)
+ .attr('width', 300)
+ .attr('height', 100)
+ .text("Title: "+d.name)
+ h.append('foreignObject')
+ .attr('x', width-300)
+ .attr('y', 35)
+ .attr('width', 300)
+ .attr('height', 100)
+ .text("Author: "+d.author)
+ h.append('foreignObject')
+ .attr('x', width-300)
+ .attr('y', 55)
+ .attr('width', 300)
+ .attr('height', 100)
+ .text("Year: "+d.year)
+ h.append('foreignObject')
+ .attr('x', width-300)
+ .attr('y', 75)
+ .attr('width', 300)
+ .attr('height', 100)
+ .text("doi: "+d.doi)
+
+ }
function ticked() {
link
@@ -213,27 +207,11 @@ var toRemove;
node
.attr("transform", function (d) {return "translate(" + d.x + ", " + d.y + ")";});
- // edgepaths.attr('d', function (d) {
- // return 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y;
- // });
-
- /* edgelabels.attr('transform', function (d) {
- if (d.target.x < d.source.x) {
- var bbox = this.getBBox();
-
- rx = bbox.x + bbox.width / 2;
- ry = bbox.y + bbox.height / 2;
- return 'rotate(180 ' + rx + ' ' + ry + ')';
- }
- else {
- return 'rotate(0)';
- }
- });*/
}
function dragstarted(d) {
- if (!d3.event.active) simulation.alphaTarget(0.3).restart()
+ if (!d3.event.active) simulation.alphaTarget(0.3).restart()//specify forces?
d.fx = d.x;
d.fy = d.y;
}
@@ -243,13 +221,7 @@ var toRemove;
d.fy = d3.event.y;
}
-// function dragended(d) {
-// if (!d3.event.active) simulation.alphaTarget(0);
-// d.fx = undefined;
-// d.fy = undefined;
-// }
-//Zoom Funktionen
function zoom_actions(){
g.attr("transform", d3.event.transform)
}
@@ -268,22 +240,8 @@ function tickActions() {
.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