Skip to content
Snippets Groups Projects
Commit a1a69c0b authored by Stahl, Merle's avatar Stahl, Merle
Browse files

Größe der Knoten abhängig von citations

parent 0d335f2d
No related branches found
No related tags found
2 merge requests!10Output,!9Main
...@@ -22,3 +22,4 @@ Noch offen: ...@@ -22,3 +22,4 @@ Noch offen:
- Informationen zu Funktionen anzeigen (?) - Informationen zu Funktionen anzeigen (?)
- Speicherfunktion (?) - Speicherfunktion (?)
- Suchfunktion - Suchfunktion
- X-Achse mit Jahreszahlen
...@@ -16,7 +16,7 @@ height = svg.attr("height"); ...@@ -16,7 +16,7 @@ height = svg.attr("height");
* creates node object and associated attributes * creates node object and associated attributes
*/ */
var node, var node,
r=12, r=10,
color = d3.scaleOrdinal() color = d3.scaleOrdinal()
.domain(["citing", "input", "cited"]) .domain(["citing", "input", "cited"])
.range([' #01d7c0', ' #8b90fe ', ' #a15eb2 ']), .range([' #01d7c0', ' #8b90fe ', ' #a15eb2 ']),
...@@ -52,8 +52,7 @@ var simulation = d3.forceSimulation() ...@@ -52,8 +52,7 @@ var simulation = d3.forceSimulation()
.force("collide", d3.forceCollide(50)) .force("collide", d3.forceCollide(50))
.force("charge", d3.forceManyBody().strength(-30)) .force("charge", d3.forceManyBody().strength(-30))
.force("center", d3.forceCenter(width/2, height/2)) .force("center", d3.forceCenter(width/2, height/2))
.force("yscale", d3.forceY().strength(1).y(function(d) {return yscale(d.group)})) .force("yscale", d3.forceY().strength(1).y(function(d) {return yscale(d.group)}));
.on("tick", tickHandler);
/** /**
* creates group element * creates group element
...@@ -79,9 +78,12 @@ function update(links, nodes) { ...@@ -79,9 +78,12 @@ function update(links, nodes) {
updateNodes(nodes); updateNodes(nodes);
simulation simulation
.nodes(nodes); .nodes(nodes)
.on("tick", tickHandler);
simulation.force("link") simulation.force("link")
.links(links); .links(links);
d3.selectAll(".link").attr('marker-end', function(d) {return updateMarker("#999", d.target);});
} }
/** /**
...@@ -96,7 +98,6 @@ function updateLinks(links) { ...@@ -96,7 +98,6 @@ function updateLinks(links) {
.append("line") .append("line")
.style("stroke-width", "1px") .style("stroke-width", "1px")
.style("stroke", "#999") .style("stroke", "#999")
.attr('marker-end',marker("#999"))
.attr("class", "link"); .attr("class", "link");
} }
...@@ -121,7 +122,7 @@ function updateNodes(nodes) { ...@@ -121,7 +122,7 @@ function updateNodes(nodes) {
node.append("circle") node.append("circle")
.attr("class", "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)}) .style("fill", function(d){ return color(d.group)})
.on('click', clickNode); .on('click', clickNode);
...@@ -133,6 +134,29 @@ function updateNodes(nodes) { ...@@ -133,6 +134,29 @@ function updateNodes(nodes) {
.on('click', clickNode); .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 * colors the circle and its links black and removes the previous markings
* @param {object} node - node * @param {object} node - node
...@@ -154,7 +178,7 @@ function clickRect() { ...@@ -154,7 +178,7 @@ function clickRect() {
d3.selectAll(".circle").style("stroke", "none") d3.selectAll(".circle").style("stroke", "none")
d3.selectAll(".link") d3.selectAll(".link")
.style("stroke", "#999") .style("stroke", "#999")
.attr('marker-end',marker('#999')) .attr('marker-end', function(d) {return updateMarker('#999', d.target);})
document.getElementById('textbox').innerHTML = "Click node"; document.getElementById('textbox').innerHTML = "Click node";
} }
...@@ -168,7 +192,7 @@ function marklink(node){ ...@@ -168,7 +192,7 @@ function marklink(node){
.style("stroke", function(o) { .style("stroke", function(o) {
return isLinkForNode(node, o) ? "black" : "#999";}) return isLinkForNode(node, o) ? "black" : "#999";})
.attr('marker-end', function(o) { .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){ ...@@ -180,27 +204,6 @@ function isLinkForNode(node, link){
return link.source.index == node.index || link.target.index == node.index; 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 * returns last name of first author
* @param {string} authors - the comma-separated string of authors * @param {string} authors - the comma-separated string of authors
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment