Größe der Knoten abhängig von citations

Output/ToDo.txt

@@ -22,3 +22,4 @@ Noch offen:
 - Informationen zu Funktionen anzeigen (?)
 - Speicherfunktion (?)
 - Suchfunktion
+- X-Achse mit Jahreszahlen

Output/cn.js

@@ -16,7 +16,7 @@ height = svg.attr("height");
 * creates node object and associated attributes
 */
 var node,
-r=12,
+r=10,
 color = d3.scaleOrdinal()
     .domain(["citing", "input", "cited"])
     .range([' #01d7c0', ' #8b90fe ', '  #a15eb2 ']),
@@ -52,8 +52,7 @@ var simulation = d3.forceSimulation()
     .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)}))
-    .on("tick", tickHandler);
+    .force("yscale", d3.forceY().strength(1).y(function(d) {return yscale(d.group)}));
 
 /**
 * creates group element
@@ -79,9 +78,12 @@ function update(links, nodes) {
     updateNodes(nodes);
 
     simulation
-        .nodes(nodes);
+        .nodes(nodes)
+        .on("tick", tickHandler);
     simulation.force("link")
         .links(links);
+    
+    d3.selectAll(".link").attr('marker-end', function(d) {return updateMarker("#999", d.target);});
 }
 
 /**
@@ -96,7 +98,6 @@ function updateLinks(links) {
         .append("line")
         .style("stroke-width", "1px")
         .style("stroke", "#999")
-        .attr('marker-end',marker("#999"))
         .attr("class", "link");
 }
 
@@ -121,7 +122,7 @@ function updateNodes(nodes) {
 
     node.append("circle")
         .attr("class", "circle")
-        .attr("r", r)
+        .attr("r", function(d) {return r+d.citations*0.1})
         .style("fill", function(d){ return color(d.group)})
         .on('click', clickNode);
 
@@ -133,6 +134,29 @@ function updateNodes(nodes) {
         .on('click', clickNode);
 }
 
+/**
+* creates arrowhead and returns its url
+* @param {string} color - color of arrowhead
+* @param {string} target - target-node
+*/
+function updateMarker(color, target) {
+    var radius = r+target.citations*0.1;
+    svg.append('defs').append('marker')//arrowhead
+        .attr('id',color.replace("#", "")+radius)
+        .attr('viewBox','-0 -5 10 10')
+        .attr('refX',radius+10)
+        .attr('refY',0)
+        .attr('orient','auto')
+        .attr('markerWidth',10)
+        .attr('markerHeight',15)
+        .attr('xoverflow','visible')
+        .append('svg:path')
+        .attr('d', 'M 0,-5 L 10 ,0 L 0,5')
+        .attr('fill', color)//arrowhead color
+        .style('stroke','none');
+    return "url(" + color + radius + ")";
+};
+
 /**
 * colors the circle and its links black and removes the previous markings
 * @param {object} node - node
@@ -154,7 +178,7 @@ function clickRect() {
     d3.selectAll(".circle").style("stroke", "none")
     d3.selectAll(".link")
         .style("stroke", "#999")
-        .attr('marker-end',marker('#999'))
+        .attr('marker-end', function(d) {return updateMarker('#999', d.target);})
     document.getElementById('textbox').innerHTML = "Click node";
 }
 
@@ -168,7 +192,7 @@ function marklink(node){
         .style("stroke", function(o) {
             return isLinkForNode(node, o) ? "black" : "#999";})
         .attr('marker-end', function(o) {
-            return isLinkForNode(node, o) ? marker('#000000') : marker('#999');})
+            return isLinkForNode(node, o) ? updateMarker('#000000', o.target) : updateMarker('#999', o.target);})
 }
 
 /**
@@ -180,27 +204,6 @@ 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
-*/
-function marker(color) {
-    svg.append('defs').append('marker')//arrowhead
-        .attr('id',color.replace("#", ""))
-        .attr('viewBox','-0 -5 10 10')
-        .attr('refX',r+10)
-        .attr('refY',0)
-        .attr('orient','auto')
-        .attr('markerWidth',10)
-        .attr('markerHeight',15)
-        .attr('xoverflow','visible')
-        .append('svg:path')
-        .attr('d', 'M 0,-5 L 10 ,0 L 0,5')
-        .attr('fill', color)//arrowhead color
-        .style('stroke','none');
-    return "url(" + color + ")";
-};
-
 /**
 * returns last name of first author
 * @param {string} authors - the comma-separated string of authors