Codestruktur verbessert

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

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>