Skip to content
Snippets Groups Projects
Commit e872074e authored by Stahl, Merle's avatar Stahl, Merle
Browse files

aufgeräumt

parent 059e8e0b
Branches
No related tags found
2 merge requests!10Output,!9Main
...@@ -10,21 +10,13 @@ var zoom = d3.zoom().on("zoom", handle_zoom); ...@@ -10,21 +10,13 @@ var zoom = d3.zoom().on("zoom", handle_zoom);
var svg = d3.select("svg.graph") var svg = d3.select("svg.graph")
.call(zoom), .call(zoom),
width = svg.attr("width"), width = svg.attr("width"),
height = svg.attr("height"); height = svg.attr("height"),
var text_info=''; perc;
var text_abstract='';
var perc;
/**
* creates node object and radius
*/
var node,
r=10,
/** /**
* scale functions that return y coordinate/color of node depending on group * scale functions that return y coordinate/color of node depending on group
*/ */
color = d3.scaleOrdinal() var color = d3.scaleOrdinal()
.domain(["height", "input", "depth"]) .domain(["height", "input", "depth"])
.range([' #01d7c0', ' #8b90fe ', ' #a15eb2 ']), .range([' #01d7c0', ' #8b90fe ', ' #a15eb2 ']),
y_scale = d3.scaleOrdinal() y_scale = d3.scaleOrdinal()
...@@ -32,6 +24,12 @@ y_scale = d3.scaleOrdinal() ...@@ -32,6 +24,12 @@ y_scale = d3.scaleOrdinal()
.range([0, 200, 400]), .range([0, 200, 400]),
to_remove; to_remove;
/**
* creates node object and default radius
*/
var node,
r = 10;
/** /**
* creates link object * creates link object
*/ */
...@@ -59,7 +57,9 @@ arrow_group_names = ["citation","self-citation"], ...@@ -59,7 +57,9 @@ arrow_group_names = ["citation","self-citation"],
group_names = ["cited by","input","reference"], group_names = ["cited by","input","reference"],
line_type = d3.scaleOrdinal() line_type = d3.scaleOrdinal()
.domain(["line","dotted"]) .domain(["line","dotted"])
.range([("8,0"),("8,8")]); .range([("8,0"),("8,8")]),
text_info = '',
text_abstract = '';
var legend = svg_legend.selectAll(".legend") var legend = svg_legend.selectAll(".legend")
.data(legend_position) .data(legend_position)
...@@ -214,7 +214,7 @@ function update_nodes(nodes) { ...@@ -214,7 +214,7 @@ function update_nodes(nodes) {
* @param {string} target - target node * @param {string} target - target node
*/ */
function update_marker(color, target) { function update_marker(color, target) {
var radius=1.5*r+target.citations*0.05 var radius = 1.5*r+target.citations*0.05;
svg.append('defs').append('marker') svg.append('defs').append('marker')
.attr('id',color.replace("#", "")+radius) .attr('id',color.replace("#", "")+radius)
.attr('viewBox','-0 -5 10 10') .attr('viewBox','-0 -5 10 10')
...@@ -304,8 +304,9 @@ function is_link_for_node(node, link){ ...@@ -304,8 +304,9 @@ function is_link_for_node(node, link){
function textbox_content(node) { function textbox_content(node) {
text_info = "Title:" + '</br>' + node.name + text_info = "Title:" + '</br>' + node.name +
'</br>' +'</br>'+"Author:"+ '</br>' +node.author+'</br>'+'</br>'+"Date:"+'</br>' '</br>' +'</br>'+"Author:"+ '</br>' +node.author+'</br>'+'</br>'+"Date:"+'</br>'
+node.year+'</br>'+'</br>'+"Journal:"+'</br>'+node.journal+'</br>'+'</br>'+"doi:"+'</br>'+'<a href="'+node.doi+ '">'+node.doi +node.year+'</br>'+'</br>'+"Journal:"+'</br>'+node.journal+'</br>'+'</br>'+"doi:"
+'</a>'+'</br>'+'</br>'+"Citations:"+'</br>'+node.citations; +'</br>'+'<a href="'+node.doi+ '">'+node.doi+'</a>'+'</br>'+'</br>'+"Citations:"
+'</br>'+node.citations;
text_abstract = node.abstract; text_abstract = node.abstract;
document.getElementById('textbox').innerHTML = text_info; document.getElementById('textbox').innerHTML = text_info;
} }
...@@ -399,7 +400,6 @@ function handle_zoom() { ...@@ -399,7 +400,6 @@ function handle_zoom() {
d3.select('g').attr("transform", d3.event.transform); d3.select('g').attr("transform", d3.event.transform);
} }
/** /**
* transforms svg so that the zoom is adapted to the size of the graph * transforms svg so that the zoom is adapted to the size of the graph
*/ */
...@@ -415,7 +415,6 @@ function zoom_to() { ...@@ -415,7 +415,6 @@ function zoom_to() {
.call(zoom.scaleBy, perc); .call(zoom.scaleBy, perc);
} }
/** /**
* transforms svg so that the zoom and drag is reset * transforms svg so that the zoom and drag is reset
*/ */
...@@ -426,7 +425,6 @@ function reset_view() { ...@@ -426,7 +425,6 @@ function reset_view() {
.call(zoom.translateTo, 0.5 * width, 0.5 * height); .call(zoom.translateTo, 0.5 * width, 0.5 * height);
d3.select('svg') d3.select('svg')
.call(zoom.scaleBy, perc); .call(zoom.scaleBy, perc);
} }
/** /**
...@@ -441,7 +439,6 @@ function save_svg(){ ...@@ -441,7 +439,6 @@ function save_svg(){
} }
}; };
/** /**
* generate svgString * generate svgString
* @param {object} svgNode - node * @param {object} svgNode - node
...@@ -546,7 +543,6 @@ function svg_string_to_image( svgString, width, height, format, callback ) { ...@@ -546,7 +543,6 @@ function svg_string_to_image( svgString, width, height, format, callback ) {
if (callback) callback(blob, filesize); if (callback) callback(blob, filesize);
}); });
}; };
image.src = imgsrc; image.src = imgsrc;
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<!-- style specifications for button and div elements --> <!-- style specifications for button and div elements -->
<style type="text/css"> <style type="text/css">
button { button {
...@@ -95,9 +96,11 @@ ...@@ -95,9 +96,11 @@
<!-- D3 (version 5) --> <!-- D3 (version 5) -->
<script src="https://d3js.org/d3.v5.min.js"></script> <script src="https://d3js.org/d3.v5.min.js"></script>
<!-- scripts to save svg element as png --> <!-- scripts to save svg element as png -->
<script src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js"></script> <script src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js"></script>
<script src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"></script> <script src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"></script>
<!-- javascript for force-directed graph --> <!-- javascript for force-directed graph -->
<script type="text/javascript" id="cn" src="cn.js"></script> <script type="text/javascript" id="cn" src="cn.js"></script>
</body> </body>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment