Kommentare angepasst

assets/cn_default.js

@@ -11,7 +11,7 @@ var svg = d3.select("svg.graph")
     .call(zoom),
 width = svg.attr("width"),
 height = svg.attr("height"),
-perc;
+zoom_perc;
 
 /**
 * scale functions that return y coordinate/color of node depending on group
@@ -21,8 +21,7 @@ var color = d3.scaleOrdinal()
     .range(['#01d7c0', '#7fa9d4', '#a15eb2']),
 y_scale = d3.scaleOrdinal()
     .domain(["Citedby", "Input", "Reference"])
-    .range([0, 200, 400]),
-to_remove;
+    .range([0, 200, 400]);
 
 /**
 * creates node object and (default) radius
@@ -30,6 +29,11 @@ to_remove;
 var node,
 r = 10;
 
+/**
+* saves highlighted node for click functionality
+*/
+var to_remove;
+
 /**
 * creates link object
 */
@@ -47,8 +51,7 @@ var rect = svg.append("rect")
     .on('click', click_rect);
 
 /**
-* creates svg object (legend) and associated attributes
-* transform
+* creates svg object (legend) with text, circles and arrows
 */
 var svg_legend = d3.select("svg.legendsvg"),
 legend_position = [65,95,125],
@@ -111,7 +114,8 @@ legend_arrow.append("text")
   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) {
+    .force("link", d3.forceLink().id(function(d) {return d.doi;}).distance(50)
+        .strength(function(d) {
             if (d.group == "Input") {return 0;}
             else {return 5;}
         }))
@@ -126,7 +130,8 @@ var simulation = d3.forceSimulation()
         else {return 200;}
     }).y(function(d) {return y_scale(d.group)}))
     .alpha(0.004)
-    .on("end",  zoom_to);
+    .velocityDecay(0.65)
+    .on("end", zoom_to_graph);
 
 /**
 * creates group element
@@ -140,12 +145,15 @@ var g = svg.append("g")
 d3.json("json_text.json").then(success,failure)
 function success(graph){
     update(graph.links, graph.nodes);
-
 }
 function failure(graph) {
-    localStorage.setItem("oldjson","irgendwaswasimmergespeichertwirdwennkeinejsondaist")
+    localStorage.setItem("oldjson","keineJson")
 }
 
+/**
+* checks at a fixed interval whether the contents of the JSON file have changed 
+  and reloads the program if necessary
+*/
 var intervalId=window.setInterval(function() {
     d3.json("json_text.json").then(function(graph) {
         newjson_string=JSON.stringify(graph) 
@@ -423,16 +431,16 @@ function handle_zoom() {
 /**
 * transforms svg so that the zoom is adapted to the size of the graph
 */
-function zoom_to() {
+function zoom_to_graph() {
     node_bounds = d3.selectAll("svg.graph").node().getBBox();
     svg_bounds = d3.select("rect").node().getBBox();
 
     perc_x = width/(node_bounds.width+100);
     perc_y = height/(node_bounds.height+100);
-    perc = d3.min([perc_x, perc_y])
+    zoom_perc = d3.min([perc_x, perc_y])
     
     d3.select('svg')
-		.call(zoom.scaleBy, perc);
+		.call(zoom.scaleBy, zoom_perc);
 }
 
 /**
@@ -444,7 +452,7 @@ function reset_view() {
     d3.select('svg')
         .call(zoom.translateTo, 0.5 * width, 0.5 * height);
     d3.select('svg')
-		.call(zoom.scaleBy, perc);
+		.call(zoom.scaleBy, zoom_perc);
 }
 
 /**

assets/cn_timeline.js

@@ -11,7 +11,7 @@ var svg = d3.select("svg.graph")
     .call(zoom),
 width = svg.attr("width"),
 height = svg.attr("height"),
-perc;
+zoom_perc;
 
 /**
 * scale functions that return y coordinate/color of node depending on group
@@ -21,8 +21,7 @@ var color = d3.scaleOrdinal()
     .range(['#01d7c0', '#7fa9d4', '#a15eb2']),
 y_scale = d3.scaleOrdinal()
     .domain(["Citedby", "Input", "Reference"])
-    .range([0, 200, 400]),
-to_remove;
+    .range([0, 200, 400]);
 
 /**
 * creates node object and (default) radius
@@ -30,6 +29,11 @@ to_remove;
 var node,
 r = 10;
 
+/**
+* saves highlighted node for click functionality
+*/
+var to_remove;
+
 /**
 * creates link object
 */
@@ -47,8 +51,7 @@ var rect = svg.append("rect")
     .on('click', click_rect);
 
 /**
-* creates svg object (legend) and associated attributes
-* transform
+* creates svg object (legend) with text, circles and arrows
 */
 var svg_legend = d3.select("svg.legendsvg"),
 legend_position = [65,95,125],
@@ -110,9 +113,9 @@ legend_arrow.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) {
+    .force("link", d3.forceLink().id(function(d) {return d.doi;}).distance(50)
+        .strength(function(d) {
             if (d.group == "Input") {return 0;}
             else {return 5;}
         }))
@@ -124,7 +127,7 @@ var simulation = d3.forceSimulation()
     .force("center", d3.forceCenter(width/2-20, height/2+40))
     .alpha(0.004)
     .velocityDecay(0.65)
-    .on("end",  zoom_to);
+    .on("end", zoom_to_graph);
 
 /**
 * creates group element
@@ -133,14 +136,14 @@ var g = svg.append("g")
     .attr("class", "everything")
 
 /**
-* creates xAxis element
+* creates x-axis element
 */
 var xAxis = d3.axisBottom()
     .tickFormat(function(d) {if (d%1==0) return d;})
     .ticks(10);
 
 /**
-* draw xAxis
+* draws x-axis
 */
 var gX = svg.append("g")
         .attr("class", "axis axis--x")
@@ -160,11 +163,14 @@ d3.json("json_text.json").then(success,failure)
 function success(graph) {
     update(graph.links, graph.nodes);
 }
-
 function failure(graph) {
-    localStorage.setItem("oldjson","irgendwaswasimmergespeichertwirdwennkeinejsondaist")
+    localStorage.setItem("oldjson","keineJson")
 }
 
+/**
+* checks at a fixed interval whether the contents of the JSON file have changed 
+  and reloads the program if necessary
+*/
 var intervalId=window.setInterval(function() {
     d3.json("json_text.json").then(function(graph) {
         newjson_string=JSON.stringify(graph) 
@@ -178,7 +184,7 @@ var intervalId=window.setInterval(function(){
 },5000);
 
 /**
-* calls update functions for links and nodes
+* calls update functions for links, nodes and x-axis
 * adds the nodes, links and tick functionality to the simulation
 * @param {object} nodes - nodes
 * @param {object} links - links
@@ -199,7 +205,7 @@ function update(links, nodes) {
 }
 
 /**
-* initializes and shows xAxis
+* initializes and shows x-axis
 * @param {object} nodes - nodes
 */
 function updateXAxis(nodes) {
@@ -351,15 +357,11 @@ function is_link_for_node(node, link) {
     return link.source.index == node.index || link.target.index == node.index;
 }
 
-
-
 /**
 * saves text for overview and abstract of node
 * outputs node info to textbox
 * @param {object} node - node
 */
-
-
 function textbox_content(node) {
     authors = node.author[0]
     for (i = 1; i < node.author.length; i++) {
@@ -468,16 +470,16 @@ function handle_zoom() {
 /**
 * transforms svg so that the zoom is adapted to the size of the graph
 */
-function zoom_to() {
+function zoom_to_graph() {
     node_bounds = d3.selectAll("svg.graph").node().getBBox();
     svg_bounds = d3.select("rect").node().getBBox();
 
     perc_x = width/(node_bounds.width+100);
     perc_y = height/(node_bounds.height+100);
-    perc = d3.min([perc_x, perc_y])
+    zoom_perc = d3.min([perc_x, perc_y])
     
     d3.select('svg')
-		.call(zoom.scaleBy, perc);
+		.call(zoom.scaleBy, zoom_perc);
 }
 
 /**
@@ -489,7 +491,7 @@ function reset_view() {
     d3.select('svg')
         .call(zoom.translateTo, 0.5 * width, 0.5 * height);
     d3.select('svg')
-		.call(zoom.scaleBy, perc);
+		.call(zoom.scaleBy, zoom_perc);
 }
 
 /**