From e872074efb2ad6db656c52e21535d2611ca8468e Mon Sep 17 00:00:00 2001
From: Merle Stahl <merle.stahl@studium.uni-hamburg.de>
Date: Wed, 15 Dec 2021 14:10:12 +0100
Subject: [PATCH] =?UTF-8?q?aufger=C3=A4umt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
Output/graph/cn.js | 112 +++++++++++++++++++---------------------
Output/graph/index.html | 3 ++
2 files changed, 57 insertions(+), 58 deletions(-)
diff --git a/Output/graph/cn.js b/Output/graph/cn.js
index 486aab6..2972d2d 100644
--- a/Output/graph/cn.js
+++ b/Output/graph/cn.js
@@ -10,21 +10,13 @@ var zoom = d3.zoom().on("zoom", handle_zoom);
var svg = d3.select("svg.graph")
.call(zoom),
width = svg.attr("width"),
-height = svg.attr("height");
-var text_info='';
-var text_abstract='';
-var perc;
-
-/**
-* creates node object and radius
-*/
-var node,
-r=10,
+height = svg.attr("height"),
+perc;
/**
* scale functions that return y coordinate/color of node depending on group
*/
-color = d3.scaleOrdinal()
+var color = d3.scaleOrdinal()
.domain(["height", "input", "depth"])
.range([' #01d7c0', ' #8b90fe ', ' #a15eb2 ']),
y_scale = d3.scaleOrdinal()
@@ -32,6 +24,12 @@ y_scale = d3.scaleOrdinal()
.range([0, 200, 400]),
to_remove;
+/**
+* creates node object and default radius
+*/
+var node,
+r = 10;
+
/**
* creates link object
*/
@@ -57,9 +55,11 @@ legend_position = [65,95,125],
arrow_legend_position = [0,25],
arrow_group_names = ["citation","self-citation"],
group_names = ["cited by","input","reference"],
-line_type=d3.scaleOrdinal()
+line_type = d3.scaleOrdinal()
.domain(["line","dotted"])
- .range([("8,0"),("8,8")]);
+ .range([("8,0"),("8,8")]),
+text_info = '',
+text_abstract = '';
var legend = svg_legend.selectAll(".legend")
.data(legend_position)
@@ -73,7 +73,7 @@ legend.append("text")
.attr("y", 0)
.attr("dy", ".35em")
.style("text-anchor", "start")
- .text(function(d,i){return group_names[i]});
+ .text(function(d,i) {return group_names[i]});
legend.append("circle")
.attr("r", r)
@@ -214,7 +214,7 @@ function update_nodes(nodes) {
* @param {string} target - target node
*/
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')
.attr('id',color.replace("#", "")+radius)
.attr('viewBox','-0 -5 10 10')
@@ -270,7 +270,7 @@ function click_rect() {
* @param {object} source - node
* @param {object} target - node
*/
-function self_citation(source,target){
+function self_citation(source,target) {
return source.author.some(item=>target.author.includes(item))
}
@@ -279,7 +279,7 @@ function self_citation(source,target){
* and to grey otherwise
* @param {object} node - node
*/
-function mark_link(node){
+function mark_link(node) {
d3.selectAll(".link")
.style("stroke", function(o) {
return is_link_for_node(node, o) ? "black" : "#999";})
@@ -292,7 +292,7 @@ function mark_link(node){
* @param {object} node - node
* @param {object} link - link
*/
-function is_link_for_node(node, link){
+function is_link_for_node(node, link) {
return link.source.index == node.index || link.target.index == node.index;
}
@@ -302,11 +302,12 @@ function is_link_for_node(node, link){
* @param {object} node - 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>'
- +node.year+'</br>'+'</br>'+"Journal:"+'</br>'+node.journal+'</br>'+'</br>'+"doi:"+'</br>'+'<a href="'+node.doi+ '">'+node.doi
- +'</a>'+'</br>'+'</br>'+"Citations:"+'</br>'+node.citations;
- text_abstract=node.abstract;
+ +node.year+'</br>'+'</br>'+"Journal:"+'</br>'+node.journal+'</br>'+'</br>'+"doi:"
+ +'</br>'+'<a href="'+node.doi+ '">'+node.doi+'</a>'+'</br>'+'</br>'+"Citations:"
+ +'</br>'+node.citations;
+ text_abstract = node.abstract;
document.getElementById('textbox').innerHTML = text_info;
}
@@ -316,31 +317,31 @@ function textbox_content(node) {
*/
function highlight_button(btn) {
reset_button_highlight();
- document.getElementById(btn).style.background="#CACACA";
+ document.getElementById(btn).style.background = "#CACACA";
}
/**
* sets color of all buttons to default light gray
*/
function reset_button_highlight() {
- document.getElementById("overview").style.background='';
- document.getElementById("abstract").style.background='';
+ document.getElementById("overview").style.background = '';
+ document.getElementById("abstract").style.background = '';
}
/**
* displays abstract in textbox if a is true, overview text otherwise
* @param {bool} a- bool
*/
-function display_abstract(a){
- if (text_abstract=='' && text_info=='') {
+function display_abstract(a) {
+ if (text_abstract == '' && text_info == '') {
document.getElementById('textbox').innerHTML="Click node";
}
else {
- if (a==true) {
- document.getElementById('textbox').innerHTML =text_abstract;
+ if (a == true) {
+ document.getElementById('textbox').innerHTML = text_abstract;
}
else {
- document.getElementById('textbox').innerHTML =text_info;
+ document.getElementById('textbox').innerHTML = text_info;
}
}
}
@@ -399,7 +400,6 @@ function handle_zoom() {
d3.select('g').attr("transform", d3.event.transform);
}
-
/**
* transforms svg so that the zoom is adapted to the size of the graph
*/
@@ -415,7 +415,6 @@ function zoom_to() {
.call(zoom.scaleBy, perc);
}
-
/**
* transforms svg so that the zoom and drag is reset
*/
@@ -426,7 +425,6 @@ function reset_view() {
.call(zoom.translateTo, 0.5 * width, 0.5 * height);
d3.select('svg')
.call(zoom.scaleBy, perc);
-
}
/**
@@ -434,22 +432,21 @@ function reset_view() {
*/
function save_svg(){
var svgString = get_svg_string(svg.node());
- svg_string_to_image( svgString, 2*width, 2*height, 'png', save ); // passes Blob and filesize String to the callback
+ svg_string_to_image(svgString, 2*width, 2*height, 'png', save); // passes Blob and filesize String to the callback
function save( dataBlob, filesize ){
- saveAs( dataBlob, 'D3 vis exported to PNG.png' ); // FileSaver.js function
+ saveAs(dataBlob, 'D3 vis exported to PNG.png'); // FileSaver.js function
}
};
-
/**
* generate svgString
* @param {object} svgNode - node
*/
-function get_svg_string( svgNode ) {
+function get_svg_string(svgNode) {
svgNode.setAttribute('xlink', 'http://www.w3.org/1999/xlink');
- var cssStyleText = get_css_styles( svgNode );
- append_css( cssStyleText, svgNode );
+ var cssStyleText = get_css_styles(svgNode);
+ append_css(cssStyleText, svgNode);
var serializer = new XMLSerializer();
var svgString = serializer.serializeToString(svgNode);
@@ -458,26 +455,26 @@ function get_svg_string( svgNode ) {
return svgString;
- function get_css_styles( parentElement ) {
+ function get_css_styles(parentElement) {
var selectorTextArr = [];
// Add Parent element Id and Classes to the list
- selectorTextArr.push( '#'+parentElement.id );
+ selectorTextArr.push('#' + parentElement.id);
for (var c = 0; c < parentElement.classList.length; c++)
- if ( !contains('.'+parentElement.classList[c], selectorTextArr) )
- selectorTextArr.push( '.'+parentElement.classList[c] );
+ if (!contains('.'+parentElement.classList[c], selectorTextArr))
+ selectorTextArr.push('.'+parentElement.classList[c]);
// Add Children element Ids and Classes to the list
var nodes = parentElement.getElementsByTagName("*");
for (var i = 0; i < nodes.length; i++) {
var id = nodes[i].id;
- if ( !contains('#'+id, selectorTextArr) )
- selectorTextArr.push( '#'+id );
+ if (!contains('#'+id, selectorTextArr))
+ selectorTextArr.push('#' + id);
var classes = nodes[i].classList;
for (var c = 0; c < classes.length; c++)
- if ( !contains('.'+classes[c], selectorTextArr) )
- selectorTextArr.push( '.'+classes[c] );
+ if (!contains('.'+classes[c], selectorTextArr))
+ selectorTextArr.push('.'+classes[c]);
}
// Extract CSS Rules
@@ -487,14 +484,14 @@ function get_svg_string( svgNode ) {
try {
if(!s.cssRules) continue;
- } catch( e ) {
+ } catch(e) {
if(e.name !== 'SecurityError') throw e; // for Firefox
continue;
}
var cssRules = s.cssRules;
for (var r = 0; r < cssRules.length; r++) {
- if ( contains( cssRules[r].selectorText, selectorTextArr ) )
+ if (contains(cssRules[r].selectorText, selectorTextArr))
extractedCSSText += cssRules[r].cssText;
}
}
@@ -503,17 +500,17 @@ function get_svg_string( svgNode ) {
return extractedCSSText;
function contains(str,arr) {
- return arr.indexOf( str ) === -1 ? false : true;
+ return arr.indexOf(str) === -1 ? false : true;
}
}
- function append_css( cssText, element ) {
+ function append_css(cssText, element) {
var styleElement = document.createElement("style");
styleElement.setAttribute("type","text/css");
styleElement.innerHTML = cssText;
var refNode = element.hasChildNodes() ? element.children[0] : null;
- element.insertBefore( styleElement, refNode );
+ element.insertBefore(styleElement, refNode);
}
}
@@ -528,7 +525,7 @@ function get_svg_string( svgNode ) {
function svg_string_to_image( svgString, width, height, format, callback ) {
var format = format ? format : 'png';
- var imgsrc = 'data:image/svg+xml;base64,'+ btoa( unescape( encodeURIComponent( svgString ) ) ); // Convert SVG string to data URL
+ var imgsrc = 'data:image/svg+xml;base64,'+ btoa(unescape(encodeURIComponent(svgString))); // Convert SVG string to data URL
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
@@ -538,14 +535,13 @@ function svg_string_to_image( svgString, width, height, format, callback ) {
var image = new Image();
image.onload = function() {
- context.clearRect ( 0, 0, width, height );
+ context.clearRect(0, 0, width, height);
context.drawImage(image, 0, 0, width, height);
- canvas.toBlob( function(blob) {
- var filesize = Math.round( blob.length/1024 ) + ' KB';
- if ( callback ) callback( blob, filesize );
+ canvas.toBlob(function(blob) {
+ var filesize = Math.round(blob.length/1024) + ' KB';
+ if (callback) callback(blob, filesize);
});
-
};
diff --git a/Output/graph/index.html b/Output/graph/index.html
index eabef75..78560da 100644
--- a/Output/graph/index.html
+++ b/Output/graph/index.html
@@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
+
<!-- style specifications for button and div elements -->
<style type="text/css">
button {
@@ -95,9 +96,11 @@
<!-- D3 (version 5) -->
<script src="https://d3js.org/d3.v5.min.js"></script>
+
<!-- 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/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"></script>
+
<!-- javascript for force-directed graph -->
<script type="text/javascript" id="cn" src="cn.js"></script>
</body>
--
GitLab