Skip to content
Snippets Groups Projects
Commit 4551732c authored by Katja's avatar Katja
Browse files

zoom und text zusammen yay

parent e84d40d8
No related branches found
No related tags found
2 merge requests!10Output,!9Main
Hide whitespace changes
Inline Side-by-side
Showing
with 73 additions and 115 deletions
Output/index.html
+ 73
− 115
View file @ 4551732c
......@@ -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>
......
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