Skip to content
Snippets Groups Projects
Commit 60f0a68e authored by Katja's avatar Katja
Browse files

click interaction, hover text

parent bdf571b6
No related branches found
No related tags found
2 merge requests!10Output,!9Main
Hide whitespace changes
Inline Side-by-side
Showing
with 77 additions and 16 deletions
Output/index.html
+ 77
− 16
View file @ 60f0a68e
...@@ -9,8 +9,10 @@ ...@@ -9,8 +9,10 @@
.link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; } .link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; }
</style> </style>
<link rel="shortcut icon" href="#">
</head> </head>
<body> <body>
<p id="id"></p> <!--for commenting with document.getElementById("id").innerHTML = "text"; -->
<svg width="960" height="600"></svg> <svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js" type="text/javascript"></script> <script src="https://d3js.org/d3.v4.min.js" type="text/javascript"></script>
...@@ -24,24 +26,28 @@ ...@@ -24,24 +26,28 @@
height = +svg.attr("height"), height = +svg.attr("height"),
node, node,
link; link;
r=5;
svg.append('defs').append('marker')//arrowhead
svg.append('defs').append('marker')
.attrs({'id':'arrowhead', .attrs({'id':'arrowhead',
'viewBox':'-0 -5 10 10', 'viewBox':'-0 -5 10 10',
'refX':13, 'refX':13,
'refY':0, 'refY':0,
'orient':'auto', 'orient':'auto',
'markerWidth':13, 'markerWidth':10,
'markerHeight':13, 'markerHeight':13,
'xoverflow':'visible'}) 'xoverflow':'visible'})
.append('svg:path') .append('svg:path')
.attr('d', 'M 0,-5 L 10 ,0 L 0,5') .attr('d', 'M 0,-5 L 10 ,0 L 0,5')
.attr('fill', '#999') .attr('fill', '#999')//arrowhead color
.style('stroke','none'); .style('stroke','none');
var simulation = d3.forceSimulation() var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function (d) { return d.doi; }).distance(100).strength(1)) .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)); .force("center", d3.forceCenter(width / 2, height / 2));
d3.json("data.json", function (error, graph) { d3.json("data.json", function (error, graph) {
...@@ -54,13 +60,15 @@ ...@@ -54,13 +60,15 @@
.data(links) .data(links)
.enter() .enter()
.append("line") .append("line")
.style("stroke-width", "1px")
.style("stroke", "#000000")
.attr("class", "link") .attr("class", "link")
.attr('marker-end','url(#arrowhead)') .attr('marker-end','url(#arrowhead)')
link.append("title") link.append("title")
.text(function (d) {return d.author;}); .text(function (d) {return d.author;});
edgepaths = svg.selectAll(".edgepath") /* edgepaths = svg.selectAll(".edgepath")
.data(links) .data(links)
.enter() .enter()
.append('path') .append('path')
...@@ -70,9 +78,9 @@ ...@@ -70,9 +78,9 @@
'stroke-opacity': 0, 'stroke-opacity': 0,
'id': function (d, i) {return 'edgepath' + i} '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) .data(links)
.enter() .enter()
.append('text') .append('text')
...@@ -90,23 +98,59 @@ ...@@ -90,23 +98,59 @@
.style("pointer-events", "none") .style("pointer-events", "none")
.attr("startOffset", "50%") .attr("startOffset", "50%")
.text(function (d) {return d.author}); .text(function (d) {return d.author});
*/
node = svg.selectAll(".node") node = svg.selectAll(".node")
.data(nodes) .data(nodes)
.enter() .enter()
.append("g") .append("g")
.attr("class", "node") .attr("class", "node")
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
//.on("end", dragended)
);
var toRemove;
node.append("circle") node.append("circle")
.attr("r", 5) .attr("r", r)
.attr("class", "circle")
.style("fill", function (d, i) {return colors(i);}) .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") 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") node.append("text")
.attr("dy", -3) //.attr("dy", -30)
.text(function (d) {return d.author;}); .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 simulation
.nodes(nodes) .nodes(nodes)
...@@ -116,6 +160,8 @@ ...@@ -116,6 +160,8 @@
.links(links); .links(links);
} }
function ticked() { function ticked() {
link link
.attr("x1", function (d) {return d.source.x;}) .attr("x1", function (d) {return d.source.x;})
...@@ -126,11 +172,11 @@ ...@@ -126,11 +172,11 @@
node node
.attr("transform", function (d) {return "translate(" + d.x + ", " + d.y + ")";}); .attr("transform", function (d) {return "translate(" + d.x + ", " + d.y + ")";});
edgepaths.attr('d', function (d) { // edgepaths.attr('d', function (d) {
return 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y; // 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) { if (d.target.x < d.source.x) {
var bbox = this.getBBox(); var bbox = this.getBBox();
...@@ -141,9 +187,20 @@ ...@@ -141,9 +187,20 @@
else { else {
return 'rotate(0)'; 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) { // function dragended(d) {
// if (!d3.event.active) simulation.alphaTarget(0); // if (!d3.event.active) simulation.alphaTarget(0);
...@@ -151,6 +208,10 @@ ...@@ -151,6 +208,10 @@
// d.fy = undefined; // d.fy = undefined;
// } // }
</script> </script>
</body> </body>
......
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