Dokumentation

Output/bob/files.html

@@ -210,7 +210,7 @@ ul.inheritsList
 		</div>
 		<div class="fineprint" style="clear:both">
 			
-			Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Tue Nov 23 2021 18:11:38 GMT+0100 (MEZ)
+			Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Tue Nov 23 2021 23:46:32 GMT+0100 (MEZ)
 		</div>
 	</body>
 </html>
\ No newline at end of file

Output/bob/index.html

@@ -204,7 +204,7 @@ ul.inheritsList
 		</div>
 		<div class="fineprint" style="clear:both">
 			
-			Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Tue Nov 23 2021 18:11:38 GMT+0100 (MEZ)
+			Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blankt">JsDoc Toolkit</a> 2.4.0 on Tue Nov 23 2021 23:46:32 GMT+0100 (MEZ)
 		</div>
 	</body>
 </html>
\ No newline at end of file

Output/cn.js

-var svg = d3.select("svg"),
-width = +svg.attr("width"),
-height = +svg.attr("height");
+/**
+* creates a new zoom behavior
+*/
+var zoom = d3.zoom().on("zoom", zoomHandler);
+
+/**
+* creates svg object and associated attributes
+* applies the zoom behavior to svg
+*/
+var svg = d3.select("svg")
+    .call(zoom),
+width = svg.attr("width"),
+height = svg.attr("height");
 
+/**
+* creates node object and associated attributes
+*/
 var node,
 r=12,
 color = d3.scaleOrdinal()
@@ -12,10 +25,14 @@ yscale = d3.scaleOrdinal()
     .range([0, 200, 400]),
 toRemove;
 
+/**
+* creates link object
+*/
 var link;
 
 /**
-* create a background
+* creates a background
+* creates a click functionality of the background
 */
 var rect = svg.append("rect")
     .attr("x", 0)
@@ -23,46 +40,55 @@ var rect = svg.append("rect")
     .attr("height", height)
     .attr("width", width)
     .style("fill", 'white')
-    .on('click', function(d) {
-    d3.selectAll(".circle").style("stroke", "none")
-    d3.selectAll(".link")
-        .style("stroke", "#999")
-        .attr('marker-end',marker('#999'))
-    document.getElementById('textbox').innerHTML = "Click node";
-});
+    .on('click', clickRect);
 
+/**
+* creates a new simulation
+* 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(100).strength(1))
     .force("collide", d3.forceCollide(50))
     .force("charge", d3.forceManyBody().strength(-30))
     .force("center", d3.forceCenter(width/2, height/2))
-    .force("yscale", d3.forceY().strength(1).y(function(d) {return yscale(d.group)}));
-
-/**
-* create a new zoom behavior and apply it to svg
-*/
-var zoom = d3.zoom()
-   .on("zoom", zoom);
-zoom(svg);  
+    .force("yscale", d3.forceY().strength(1).y(function(d) {return yscale(d.group)}))
+    .on("tick", tickHandler);
 
 /**
-* create group element
+* creates group element
 */
 var g = svg.append("g")
     .attr("class", "everything")
 
-//d3.json("data.json", function (error, graph) {
+/**
+* loads JSON data and calls the update function
+*/
 d3.json("json_text.json").then(function(graph) {
     update(graph.links, graph.nodes);
 })
 
 /**
-* display links and nodes (with circle and text)
-* initialises link, node objects
+* calls update functions for links and nodes
+* adds the nodes and links to the simulation
 * @param {object} nodes - nodes
 * @param {object} links - links
 */
 function update(links, nodes) {
+    updateLinks(links);
+    updateNodes(nodes);
+
+    simulation
+        .nodes(nodes);
+    simulation.force("link")
+        .links(links);
+}
+
+/**
+* initializes and shows links
+* @param {object} links - links
+*/
+function updateLinks(links) {
     link = g.append("g")
         .selectAll(".link")
         .data(links)
@@ -70,67 +96,66 @@ function update(links, nodes) {
         .append("line")
         .style("stroke-width", "1px")
         .style("stroke", "#999")
-        .attr("class", "link")
         .attr('marker-end',marker("#999"))
+        .attr("class", "link");
+}
 
-    node = g.append("g")       
-        .selectAll(".node")
+/**
+* initializes and shows nodes with circles and texts
+* creates a new drag behavior and applies it to the circles
+* creates a click functionality of the circles and texts
+* @param {object} nodes - nodes
+*/
+function updateNodes(nodes) {
+    node = g.selectAll(".node")
         .data(nodes)
         .enter()
         .append("g")
         .attr("class", "node")
+        .attr("initial_x", function(d) {return d.dx;})
+        .attr("initial_y", function(d) {return d.dy;})
         .call(d3.drag()
             .on("start", dragstarted)
             .on("drag", dragged)
-        )
-        .attr("initial_x", function(d) {return d.dx;})
-        .attr("initial_y", function(d) {return d.dy;});
+        );
 
     node.append("circle")
-        .attr("r", r)
         .attr("class", "circle")
+        .attr("r", r)
         .style("fill", function(d){ return color(d.group)})
-        .on('click', function (d) {
-            if(toRemove){
-                d3.select(toRemove).selectAll(".circle").style("stroke","none")
-            }
-            toRemove = this.parentNode;
-            d3.select(this).style("stroke","black")
-            marklink(d)
-            textfunc(d)
-        });
+        .on('click', clickNode);
 
     node.append("text")
-        .attr("class", "text") //über selectAll(".text") können objs mit der klasse ausgewählt werden
+        .attr("class", "text") 
         .style("font-size", "15px")
-        .text(function (d) {return firstauthor(d.author);})
         .style('pointer-events', 'auto')
-        .on('click', function(d) {
-           if(toRemove){
-           d3.select(toRemove).selectAll(".circle").style("stroke","none");
-        }
-        toRemove = this.parentNode;
-        d3.select(this.parentNode).selectAll(".circle").style("stroke","black")
-
-        marklink(d)
-        textfunc(d);
-    });
-
-simulation
-    .nodes(nodes)
-    .on("tick", ticked);
-
-simulation.force("link")
-    .links(links);
+        .text(function (d) {return firstauthor(d.author);})
+        .on('click', clickNode);
 }
 
 /**
-* returns true if link is directly connected to node and false if it is not
+* colors the circle and its links black and removes the previous markings
 * @param {object} node - node
-* @param {object} link - link
 */
-function isLinkForNode(node, link){
-return link.source.index == node.index || link.target.index == node.index;
+function clickNode(node) {
+    if(toRemove){
+        d3.select(toRemove).selectAll(".circle").style("stroke","none")
+    }
+    toRemove = this.parentNode;
+    d3.select(this.parentNode).selectAll(".circle").style("stroke","black")
+    marklink(node)
+    textfunc(node)
+}
+
+/**
+* removes the markings of the circles and their links
+*/
+function clickRect() {
+    d3.selectAll(".circle").style("stroke", "none")
+    d3.selectAll(".link")
+        .style("stroke", "#999")
+        .attr('marker-end',marker('#999'))
+    document.getElementById('textbox').innerHTML = "Click node";
 }
 
 /**
@@ -146,6 +171,15 @@ function marklink(node){
             return isLinkForNode(node, o) ? marker('#000000') : marker('#999');})
 }
 
+/**
+* returns true if link is directly connected to node and false if it is not
+* @param {object} node - node
+* @param {object} link - link
+*/
+function isLinkForNode(node, link){
+    return link.source.index == node.index || link.target.index == node.index;
+}
+
 /**
 * creates arrowhead and returns its url
 * @param {string} color - color of arrowhead
@@ -183,15 +217,18 @@ function firstauthor(authors){
 
 /**
 * outputs node info to textbox
-* @param {object} d - data of current node
+* @param {object} node - data of current node
 */
-function textfunc(d){
-    document.getElementById('textbox').innerHTML = "Title:" + '</br>' + d.name +
-    '</br>' +'</br>'+"Author:"+ '</br>' +d.author+'</br>'+'</br>'+"Year:"+'</br>'+d.year+'</br>'+'</br>'
-    +"doi:"+'</br>'+d.doi;
+function textfunc(node){
+    document.getElementById('textbox').innerHTML = "Title:" + '</br>' + node.name +
+    '</br>' +'</br>'+"Author:"+ '</br>' +node.author+'</br>'+'</br>'+"Year:"+'</br>'
+    +node.year+'</br>'+'</br>'+"doi:"+'</br>'+node.doi;
 }
 
-function ticked() {
+/**
+* updates the positions of the links and nodes
+*/
+function tickHandler() {
     link.attr("x1", function (d) {return d.source.x;})
         .attr("y1", function (d) {return d.source.y;})
         .attr("x2", function (d) {return d.target.x;})
@@ -199,18 +236,29 @@ function ticked() {
     node.attr("transform", function (d) {return "translate(" + d.x + ", " + d.y + ")";});
 }
 
-function dragstarted(d) {
+/**
+* initializes the dragging of the node
+* @param {object} node - data of current node
+*/
+function dragstarted(node) {
     if (!d3.event.active) 
         simulation.alphaTarget(0.3).restart()
-    d.fx = d.x;
-    d.fy = d.y;
+    node.fx = node.x;
+    node.fy = node.y;
 }
 
-function dragged(d) {
-    d.fx = d3.event.x;
-    d.fy = d3.event.y;
+/**
+* applies the dragging to the node
+* @param {object} node - data of current node
+*/
+function dragged(node) {
+    node.fx = d3.event.x;
+    node.fy = d3.event.y;
 }
 
+/**
+* resets the positions of the nodes
+*/
 function resetGraph() {
     d3.selectAll(".node").each(function(d) {
         d.fx = d.initial_x;
@@ -218,12 +266,15 @@ function resetGraph() {
     })
 }
 
-function zoom() {
+/**
+* applies the transformation (zooming or dragging) to the g element
+*/
+function zoomHandler() {
     d3.select('g').attr("transform", d3.event.transform);
 }
 
 /**
-* transforms svg such that the zoom is reset
+* transforms svg so that that the zoom is reset
 */
 function resetZoom() {
     d3.select('svg')
@@ -231,7 +282,7 @@ function resetZoom() {
 }
 
 /**
-* transforms svg such that it is centered
+* transforms svg so that it is centered
 */
 function center() {
     d3.select('svg')

data.json

+{"nodes":[{"name":"StudieA","author":"MenschA","year":"JahrA","doi":"doiA","group":"input"},
+    {"name":"StudieB","author":"MenschB","year":"JahrB","doi":"doiB","group":"cited"},
+    {"name":"StudieC","author":"MenschC","year":"JahrC","doi":"doiC","group":"input"},
+    {"name":"StudieD","author":"MenschD","year":"JahrD","doi":"doiD","group":"cited"},
+    {"name":"StudieE","author":"MenschE","year":"JahrE","doi":"doiE","group":"cited"},
+    {"name":"StudieF","author":"MenschF","year":"JahrF","doi":"doiF","group":"cited"},
+    {"name":"StudieG","author":"MenschG","year":"JahrG","doi":"doiG","group":"citing"},
+    {"name":"StudieH","author":"MenschH","year":"JahrH","doi":"doiH","group":"cited"}, 
+    {"name":"StudieI","author":"MenschI","year":"JahrI","doi":"doiI","group":"citing"}],
+"links":[{"source":"doiA","target":"doiB"},
+    {"source":"doiA","target":"doiC"},
+    {"source":"doiC","target":"doiE"},
+    {"source":"doiD","target":"doiB"},
+    {"source":"doiC","target":"doiB"},
+    {"source":"doiA","target":"doiH"},
+    {"source":"doiA","target":"doiI"},
+    {"source":"doiI","target":"doiC"},
+    {"source":"doiH","target":"doiC"},
+    {"source":"doiG","target":"doiA"},
+    {"source":"doiH","target":"doiI"},
+    {"source":"doiE","target":"doiF"}
+
+    ]}