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
Show 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 @@
.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,16 +187,31 @@
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);
// d.fx = undefined;
// d.fy = undefined;
// }
</script>
</body>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment