From 60f0a68e3f7bdddd026088fd4817a58fea3bc8d6 Mon Sep 17 00:00:00 2001
From: Katja <bax5612@studium.uni-hamburg.de>
Date: Tue, 9 Nov 2021 18:49:46 +0100
Subject: [PATCH] click interaction, hover text
---
Output/index.html | 93 +++++++++++++++++++++++++++++++++++++++--------
1 file changed, 77 insertions(+), 16 deletions(-)
diff --git a/Output/index.html b/Output/index.html
index ce1e960..23ddb58 100644
--- a/Output/index.html
+++ b/Output/index.html
@@ -9,8 +9,10 @@
.link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; }
</style>
+ <link rel="shortcut icon" href="#">
</head>
<body>
+<p id="id"></p> <!--for commenting with document.getElementById("id").innerHTML = "text"; -->
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js" type="text/javascript"></script>
@@ -24,24 +26,28 @@
height = +svg.attr("height"),
node,
link;
+ r=5;
+
+ svg.append('defs').append('marker')//arrowhead
- svg.append('defs').append('marker')
.attrs({'id':'arrowhead',
'viewBox':'-0 -5 10 10',
'refX':13,
'refY':0,
'orient':'auto',
- 'markerWidth':13,
+ 'markerWidth':10,
'markerHeight':13,
'xoverflow':'visible'})
.append('svg:path')
.attr('d', 'M 0,-5 L 10 ,0 L 0,5')
- .attr('fill', '#999')
+ .attr('fill', '#999')//arrowhead color
.style('stroke','none');
+
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function (d) { return d.doi; }).distance(100).strength(1))
- .force("charge", d3.forceManyBody())
+ .force("collide", d3.forceCollide(r+35))
+ .force("charge", d3.forceManyBody().strength(-30))
.force("center", d3.forceCenter(width / 2, height / 2));
d3.json("data.json", function (error, graph) {
@@ -54,13 +60,15 @@
.data(links)
.enter()
.append("line")
+ .style("stroke-width", "1px")
+ .style("stroke", "#000000")
.attr("class", "link")
.attr('marker-end','url(#arrowhead)')
link.append("title")
.text(function (d) {return d.author;});
- edgepaths = svg.selectAll(".edgepath")
+ /* edgepaths = svg.selectAll(".edgepath")
.data(links)
.enter()
.append('path')
@@ -70,9 +78,9 @@
'stroke-opacity': 0,
'id': function (d, i) {return 'edgepath' + i}
})
- .style("pointer-events", "none");
+ .style("pointer-events", "none");*/
- edgelabels = svg.selectAll(".edgelabel")
+ /* edgelabels = svg.selectAll(".edgelabel")
.data(links)
.enter()
.append('text')
@@ -90,23 +98,59 @@
.style("pointer-events", "none")
.attr("startOffset", "50%")
.text(function (d) {return d.author});
+ */
node = svg.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.attr("class", "node")
+ .call(d3.drag()
+ .on("start", dragstarted)
+ .on("drag", dragged)
+ //.on("end", dragended)
+ );
+
+var toRemove;
node.append("circle")
- .attr("r", 5)
+ .attr("r", r)
+ .attr("class", "circle")
.style("fill", function (d, i) {return colors(i);})
+
+ .on('click', function() {
+ if(toRemove){
+ d3.select(toRemove).selectAll(".circle").attr("r", r);
+ }
+ toRemove = this.parentNode;
+ d3.select(this).attr("r", 12);
+ });
+
+
+ /* .on("click", function(){
+ d3.select(this).attr('r', r+5)
+ //.style("fill","lightcoral")
+ });*/
+
node.append("title")
- .text(function (d) {return d.author;});
+ .text(function (d) {return "Title: "+d.name+"\nAuthor: "+d.author+"\nYear: "+d.year+"\ndoi: "+d.doi;});
node.append("text")
- .attr("dy", -3)
- .text(function (d) {return d.author;});
+ //.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() {
+ if(toRemove){
+ d3.select(toRemove).selectAll(".circle").attr("r", r);
+ }
+ toRemove = this.parentNode;
+ d3.select(this.parentNode).selectAll(".circle").attr("r", 12);
+ });
simulation
.nodes(nodes)
@@ -116,6 +160,8 @@
.links(links);
}
+
+
function ticked() {
link
.attr("x1", function (d) {return d.source.x;})
@@ -126,11 +172,11 @@
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;
- });
+ // 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) {
+ /* edgelabels.attr('transform', function (d) {
if (d.target.x < d.source.x) {
var bbox = this.getBBox();
@@ -141,9 +187,20 @@
else {
return 'rotate(0)';
}
- });
+ });*/
+ }
+
+
+ function dragstarted(d) {
+ if (!d3.event.active) simulation.alphaTarget(0.3).restart()
+ d.fx = d.x;
+ d.fy = d.y;
}
+ function dragged(d) {
+ d.fx = d3.event.x;
+ d.fy = d3.event.y;
+ }
// function dragended(d) {
// if (!d3.event.active) simulation.alphaTarget(0);
@@ -151,6 +208,10 @@
// d.fy = undefined;
// }
+
+
+
+
</script>
</body>
--
GitLab