Skip to content
Snippets Groups Projects
Commit 71ad41e3 authored by Katja's avatar Katja
Browse files

auto zoom

parent 37d667cb
No related branches found
No related tags found
2 merge requests!10Output,!9Main
Expand all Show whitespace changes
Inline Side-by-side
Output.zip 0 → 100644
+ 0
− 0
View file @ 71ad41e3
File added
Output/Graph/cn.js
+ 58
− 70
View file @ 71ad41e3
......@@ -13,7 +13,7 @@ width = svg.attr("width"),
height = svg.attr("height");
var textinfo='';
var textabstract='';
var perc;
/**
* creates node object and associated attributes
*/
......@@ -54,7 +54,7 @@ var svglegend = d3.select("svg.legendsvg"),
legendposition = [65,95,125],
arrowlegendposition = [0,25],
arrowgroupnames = ["citation","self-citation"],
groupnames = ["citing","input","cited"];
groupnames = ["cited by","input","reference"];
var legend = svglegend.selectAll(".legend")
.data(legendposition)
......@@ -105,13 +105,33 @@ legendarrow.append("text")
* updates the positions of the links and nodes when the
state of the layout has changed (simulation has advanced by a tick)
*/
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) {return d.doi;}).distance(50).strength(function(d){
if (d.group == "input") {return 0;}
else {return 5;}
}))
.force("collide", d3.forceCollide(function(d){
if (d.group == "input") {return 100;}
else {return 65;}
}).strength(0.5))
.force("charge", d3.forceManyBody().strength(0.001))
.force("center", d3.forceCenter(width/2, height/2+20))
//.force("yscale", d3.forceY().strength(150).y(function(d) {return yscale(d.group)}))
.force("yscale", d3.forceY().strength(function(d){
if (d.group == "input") {return 1000;}
else {return 50;}
}).y(function(d) {return yscale(d.group)}))
.alpha(0.005)
.on("end", zoomTo);
/*
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) {return d.doi;}).distance(200))
.force("collide", d3.forceCollide(50).strength(0.5))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width/2, height/2+20))
.force("yscale", d3.forceY().strength(1).y(function(d) {return yscale(d.group)}))
.alpha(0.1);
.alpha(0.1)
.on("end", zoomTo,ahaa);*/
/**
* creates group element
......@@ -122,7 +142,7 @@ var g = svg.append("g")
/**
* loads JSON data and calls the update function
*/
d3.json("json_text.json").then(function(graph) {
d3.json("json_with_citations.json").then(function(graph) {
update(graph.links, graph.nodes);
})
......@@ -145,8 +165,13 @@ function update(links, nodes) {
link.attr('marker-end', function(d) {return updateMarker("#999", d.target);})
.style("stroke-dasharray",function(d){return self_cit(d.source,d.target)? ("8,8"): ("1,0")});
zoomTo();
}
function ahaa(){
d3.selectAll(".node").attr("initial_x", function(d) {return d.dx;})
.attr("initial_y", function(d) {return d.dy;})
}
function zoomTo() {
node_bounds = d3.selectAll("svg.graph").node().getBBox();
......@@ -162,65 +187,10 @@ function zoomTo() {
perc = d3.min([perc_x, perc_y])
//console.log(perc_x, perc)
d3.select('svg')
.transition()
.call(zoom.scaleBy, perc);
}
/*
function zoomTo() {
var bounds = root.node().getBBox();
//var bounds = d3.select(".node").node().getBBox();
var parent = root.node().parentElement;
var fullWidth = parent.clientWidth,
fullHeight = parent.clientHeight;
var width = bounds.width,
height = bounds.height;
var midX = bounds.x + width / 2,
midY = bounds.y + height / 2;
if (width == 0 || height == 0) return; // nothing to fit
var scale = (0.75) / Math.max(width / fullWidth, height / fullHeight);
var translate = [fullWidth / 2 - scale * midX, fullHeight / 2 - scale * midY];
console.trace("zoomFit", translate, scale);
root
.transition()
.call(zoom.translate(translate).scale(scale).event);
}
*/
/*function zoomTo() {
x_array = [];
y_array = [];
d3.selectAll(".node").each(function(d) {
//ctm = d[0][0].getCTM();
//xy_trans = d3.translate(d.x, d.y);
//x_array.push(xy_trans[0]);
// x_array.push(ctm.e + d.x*ctm.a + d.y*ctm.c);
x_array.push(d.x);
y_array.push(d.y)
console.log(d.x, d.y)
})
var max_x = d3.max(x_array);
var min_x = d3.min(x_array);
var diff_x = max_x-min_x-50;
perc_y = (diff_x*13)/width;
//if (perc_y < 1) {perc_y = perc_y+1;}
var max_y = d3.max(y_array);
var min_y = d3.min(y_array);
var diff_y = max_y-min_y-50;
perc_x = (diff_y*13)/height;
//if (perc_x < 1) {perc_x = perc_y+1;}
console.log(max_y, min_y)
perc = d3.max([perc_x, perc_y])
console.log(perc_x, perc)
d3.select('svg')
.transition()
.call(zoom.scaleBy, perc);
}*/
/**
* initializes and shows links
......@@ -249,8 +219,6 @@ function updateNodes(nodes) {
.enter()
.append("g")
.attr("class", "node")
.attr("initial_x", function(d) {return d.dx;})
.attr("initial_y", function(d) {return d.dy;})
//.attr("abs_x", function(d) {return parseInt(d.attr("cx")) + d[0][0].getCTM().e})
//.attr("abs_y", function(d) {return parseInt(d.attr("cy")) + d[0][0].getCTM().f})
.call(d3.drag()
......@@ -301,6 +269,7 @@ function updateMarker(color, target) {
* @param {object} node - node
*/
function clickNode(node) {
d3.select(this.parentNode).raise();
fix_nodes(node);
if(toRemove){
d3.select(toRemove).selectAll(".circle").style("stroke","none")
......@@ -376,7 +345,7 @@ function textfunc(node){
function highlightbutton(btn){
resetbuttonhighlight();
document.getElementById(btn).style.background="#DCDCDC";
document.getElementById(btn).style.background="#cacaca";
}
function resetbuttonhighlight(){
document.getElementById("overview").style.background='';
......@@ -413,6 +382,7 @@ function tickHandler() {
* @param {object} node - data of current node
*/
function dragstarted(node) {
d3.select(this).raise();
if (!d3.event.active)
simulation.alphaTarget(0.3).restart()
node.fx = node.x;
......@@ -443,10 +413,16 @@ function fix_nodes(this_node) {
* resets the positions of the nodes
*/
function resetGraph() {
d3.selectAll(".node").each(function(d) {
node.each(function(d) {
d.fx = d.initial_x;
d.fy = d.initial_y;
})
});
simulation.tick();
simulation.tick();
simulation.stop();
}
/**
......@@ -456,12 +432,23 @@ function zoomHandler() {
d3.select('g').attr("transform", d3.event.transform);
}
d3.selection.prototype.moveToFront = function() {
return this.each(function(){
this.parentNode.appendChild(this);
});
};
/**
* transforms svg so that that the zoom is reset
*/
function resetZoom() {
function resetView() {
d3.select('svg')
.call(zoom.scaleTo, 1)
d3.select('svg')
.call(zoom.translateTo, 0.5 * width, 0.5 * height);
d3.select('svg')
.call(zoom.scaleTo, 1);
.call(zoom.scaleBy, perc);
}
/**
......@@ -581,3 +568,4 @@ function svgString2Image( svgString, width, height, format, callback ) {
image.src = imgsrc;
}
Output/Graph/index.html
+ 38
− 37
View file @ 71ad41e3
......@@ -10,36 +10,27 @@
display: flex;
justify-content: center;
position: absolute;
left: 430px;
left: 455px;
top: 575px;
transition-duration: 0.4s;
border-radius:3px;
border:1px solid #909090;
}
.button:hover {
background-color: #cacaca;
}
button.resetGraph {}
button.resetZoom {
margin-left: 110px;
}
button.center {
margin-left: 220px;
}
button.save{
margin-left: 330px;
}
div.legendbox {
width: 270px;
height: 170px;
padding: 10px;
/*border: 1px solid #999;*/
position: absolute;
top: 10px;
left: 968px;
display: inline-block;
margin: 0;
margin-left: 220px;
}
button.abstract{
width:146px;
position:absolute;
......@@ -48,7 +39,6 @@
border-radius:0;
border:1px solid #909090;
}
button.overview{
width:147px;
position:absolute;
......@@ -59,6 +49,18 @@
border:1px solid #909090;
}
div.legendbox {
width:270px;
height:170px;
padding: 10px;
/*border: 1px solid #999;*/
position: absolute;
top: 10px;
left: 968px;
display: inline-block;
margin: 0;
}
div.textbox{
width:270px;
min-height:200px;
......@@ -89,10 +91,9 @@
<div class="textbox" id = "textbox">Click node</div>
<!-- reset buttons -->
<!-- <button onclick="javascript:location.reload();">Reload</button>-->
<button class="resetGraph" onclick="resetGraph()">Reset graph</button>
<button class="resetZoom" onclick="resetZoom()">Reset zoom</button>
<button class="center" onclick="center()">Center</button>
<button class="resetGraph" onclick="javascript:location.reload();">Reload Graph</button>
<!-- <button class="resetGraph" onclick="resetGraph(),fix_all()">Reset graph</button>-->
<button class="resetZoom" onclick="resetView()">Reset View</button>
<button class="save" onclick="savesvg()">Save</button>
<button id="overview" class="overview" onclick='displayabstract(false),highlightbutton("overview")'>Overview</button>
<button id="abstract" class="abstract" onclick='displayabstract(true),highlightbutton("abstract")'>Abstract</button>
......
Output/Graph/json_with_citations.json 0 → 100644
+ 819
− 0
View file @ 71ad41e3
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment