From c3b3004423bffd7949f2d0c233beda873cee1798 Mon Sep 17 00:00:00 2001
From: Merle Stahl <merle.stahl@studium.uni-hamburg.de>
Date: Tue, 7 Dec 2021 15:48:39 +0100
Subject: [PATCH] Codestruktur verbessert
---
Output/Graph/cn.js | 141 ++++++++----------
Output/Graph/index.html | 54 ++++---
.../{index.html => index_alt.html} | 0
3 files changed, 87 insertions(+), 108 deletions(-)
rename Output/Graph_mit_Zeitstrahl/{index.html => index_alt.html} (100%)
diff --git a/Output/Graph/cn.js b/Output/Graph/cn.js
index aa2ec65..0be4ced 100644
--- a/Output/Graph/cn.js
+++ b/Output/Graph/cn.js
@@ -7,9 +7,6 @@ var zoom = d3.zoom().on("zoom", zoomHandler);
* creates svg object and associated attributes
* applies the zoom behavior to svg
*/
-
-var svg2=d3.select("svg.legendsvg")
-
var svg = d3.select("svg.graph")
.call(zoom),
width = svg.attr("width"),
@@ -34,7 +31,7 @@ toRemove;
/**
* creates link object
*/
-
+var link;
/**
* creates a background
@@ -48,6 +45,59 @@ var rect = svg.append("rect")
.style("fill", 'white')
.on('click', clickRect);
+/**
+* creates svg object (legend) and associated attributes
+*/
+var svglegend = d3.select("svg.legendsvg"),
+legendposition = [65,95,125],
+arrowlegendposition = [0,25],
+arrowgroupnames = ["citation","self-citation"],
+groupnames = ["citing","input","cited"];
+
+var legend = svglegend.selectAll(".legend")
+ .data(legendposition)
+ .enter()
+ .append("g")
+ .attr("class","legend")
+ .attr("transform", function(d,i) {return "translate(0," + d + ")"; });
+
+legend.append("text")
+ .attr("x", 80)
+ .attr("y", 0)
+ .attr("dy", ".35em")
+ .style("text-anchor", "start")
+ .text(function(d,i){return groupnames[i]});
+
+legend.append("circle")
+ .attr("r", r)
+ .attr("cx",30-r)
+ .style("fill", color);
+
+var legendarrow = svglegend.selectAll(".legendarr")
+ .data(arrowlegendposition)
+ .enter()
+ .append("g")
+ .attr("class","legendarr")
+ .attr("transform", function(d) { return "translate(0," + d + ")"; });
+
+legendarrow.append("line")
+ .attr("x1", 10)
+ .attr("x2", 50)
+ .attr("y1", 10)
+ .attr("y2", 10)
+ .style("stroke-dasharray",linetype)
+ .style("stroke", '#999')
+ .style("stroke-width", "1px")
+ .style('pointer-events', 'none')
+ .attr('marker-end',updateMarker('#999',this));
+
+legendarrow.append("text")
+ .attr("x", 80)
+ .attr("y", 10)
+ .attr("dy", ".35em")
+ .style("text-anchor", "start")
+ .text(function(d,i){return arrowgroupnames[i]});
+
/**
* creates a new simulation
* updates the positions of the links and nodes when the
@@ -66,10 +116,6 @@ var simulation = d3.forceSimulation()
var g = svg.append("g")
.attr("class", "everything")
-
-
-
-
/**
* loads JSON data and calls the update function
*/
@@ -96,65 +142,6 @@ 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")});
}
-
-
-var rect2 = svg.append("rect")
- .attr("x", 0)
- .attr("y", 0)
- .attr("height", 180)
- .attr("width", 210)
- .style("fill", 'white');
-
-legendposition=[65,95,125]
-arrowlegendposition=[0,25]
-arrowgroupnames=["citation","self-citation"]
-groupnames=["citing","input","cited"]
-
-var legend = svg2.selectAll(".legend")
- .data(legendposition)
- .enter()
- .append("g")
- .attr("class","legend")
- .attr("transform", function(d,i) {return "translate(0," + d + ")"; });
-
-
-legend.append("text")
- .attr("x", 80)
- .attr("y", 0)
- .attr("dy", ".35em")
- .style("text-anchor", "start")
- .text(function(d,i){return groupnames[i]});
-
-legend.append("circle")
- .attr("r", r)
- .attr("cx",30-r)
- .style("fill", color);
-
-
-var legendarrow = svg2.selectAll(".legendarr")
- .data(arrowlegendposition)
- .enter()
- .append("g")
- .attr("class","legendarr")
- .attr("transform", function(d) { return "translate(0," + d + ")"; });
-
-legendarrow.append("line")
- .attr("x1", 10)
- .attr("x2", 50)
- .attr("y1", 10)
- .attr("y2", 10)
- .style("stroke-dasharray",linetype)
- .style("stroke", '#999')
- .style("stroke-width", "1px")
- .style('pointer-events', 'none')
- .attr('marker-end',updateMarker('#999',this));
-legendarrow.append("text")
- .attr("x", 80)
- .attr("y", 10)
- .attr("dy", ".35em")
- .style("text-anchor", "start")
- .text(function(d,i){return arrowgroupnames[i]});
-
/**
* initializes and shows links
@@ -211,7 +198,7 @@ function updateNodes(nodes) {
*/
function updateMarker(color, target) {
var radius = r+target.citations*0.1;
- svg.append('defs').append('marker')//arrowhead
+ svg.append('defs').append('marker') //arrowhead
.attr('id',color.replace("#", "")+radius)
.attr('viewBox','-0 -5 10 10')
.attr('refX',radius+10)
@@ -222,7 +209,7 @@ function updateMarker(color, target) {
.attr('xoverflow','visible')
.append('svg:path')
.attr('d', 'M 0,-5 L 10 ,0 L 0,5')
- .attr('fill', color)//arrowhead color
+ .attr('fill', color) //arrowhead color
.style('stroke','none');
return "url(" + color + radius + ")";
};
@@ -253,14 +240,16 @@ function clickRect() {
}
function create_author_array(authors){
- authorarray=authors.split(",")
- authorarray=authorarray.map(elem =>{return elem.trim();})
+ authorarray = authors.split(",")
+ authorarray = authorarray.map(elem =>{return elem.trim();})
return authorarray
}
+
function self_cit(source,target){
- sourceauthors=create_author_array(source.author)
- targetauthors=create_author_array(target.author)
+ sourceauthors = create_author_array(source.author)
+ targetauthors = create_author_array(target.author)
+
return sourceauthors.some(item=>targetauthors.includes(item))
}
@@ -286,10 +275,6 @@ function isLinkForNode(node, link){
return link.source.index == node.index || link.target.index == node.index;
}
-
-
-
-
/**
* returns last name of first author
* @param {string} authors - the comma-separated string of authors
@@ -379,8 +364,6 @@ function center() {
.call(zoom.translateTo, 0.5 * width, 0.5 * height);
}
-
-
function savesvg(){
var svgString = getSVGString(svg.node());
svgString2Image( svgString, 2*width, 2*height, 'png', save ); // passes Blob and filesize String to the callback
diff --git a/Output/Graph/index.html b/Output/Graph/index.html
index dea8b6e..e4845d9 100644
--- a/Output/Graph/index.html
+++ b/Output/Graph/index.html
@@ -4,18 +4,6 @@
<meta charset="utf-8">
<style type="text/css">
- div.legendbox {
- width:270px;
- height:170px;
- padding: 10px;
- /*border: 1px solid #999;*/
- position: absolute;
- top: 10px;
- left: 968px;
- display: inline-block;
- margin: 0;
- }
-
button {
width: 100px;
height:20px;
@@ -26,9 +14,7 @@
top: 575px;
}
- button.resetGraph {
- color: black;
- }
+ button.resetGraph {}
button.resetZoom {
margin-left: 110px;
@@ -42,6 +28,18 @@
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;
+ }
+
div.textbox{
width:270px;
min-height:200px;
@@ -55,9 +53,6 @@
overflow-y: scroll;
margin: 0;
}
-
- / textbox */
-
</style>
</head>
@@ -66,19 +61,20 @@
<p id="id"></p> <!--for commenting with document.getElementById("id").innerHTML = "text"; -->
<!-- graph -->
- <svg class="graph" width="960" height="560" ></svg>
- <div class="legendbox"> <svg class="legendsvg"></svg> </div>
- <!-- textbox -->
- <div class="textbox" id = "textbox" >Click node</div>
-
+ <svg class="graph" width="960" height="560"></svg>
+ <!-- legend -->
+ <div class="legendbox"> <svg class="legendsvg"></svg></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="save" onclick="savesvg()">Save</button>
+ <!-- textbox -->
+ <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="save" onclick="savesvg()">Save</button>
<!-- link D3 (version 5) -->
<script src="https://d3js.org/d3.v5.min.js"></script>
diff --git a/Output/Graph_mit_Zeitstrahl/index.html b/Output/Graph_mit_Zeitstrahl/index_alt.html
similarity index 100%
rename from Output/Graph_mit_Zeitstrahl/index.html
rename to Output/Graph_mit_Zeitstrahl/index_alt.html
--
GitLab