I would like to place my link arrow markets on the edge of the node it is pointing to. The problem is that my nodes dont all have the same size.
For now, the arrows are all set to a fixed distance from it's target node. So depending on the node's radius, the arrow is either far away from the node or "under" the node.
Is there a way to achieve this?
const svg = d3.create("svg")
.attr("id", "svgId")
.attr("preserveAspectRatio", "xMidYMid meet")
.attr("viewBox", [-width/2,-height/2, width,height])
.classed("svg-content-responsive", true)
const defs = svg.append('svg:defs');
defs.append('marker')
.attr("id",'arrowhead')
.attr('viewBox','-0 -5 10 10')
.attr('refX',30)
.attr('refY',0)
.attr('orient','auto')
.attr('markerWidth',3)
.attr('markerHeight',3)
.attr('xoverflow','visible')
.append('svg:path')
.attr('d', 'M 0,-5 L 10 ,0 L 0,5')
.attr('fill', 'white')
.style('stroke','white');
const link = svg.append("g")
.attr("stroke-opacity", 1)
.attr("stroke-width", 2)
.selectAll("line")
.data(links)
.join("line")
;
link.attr("stroke", "white")
.attr("stroke-width", 5)
.attr('marker-end','url(#arrowhead)')
const node = svg.append("g")
.attr("stroke", nodeStroke)
.attr("stroke-opacity", nodeStrokeOpacity)
.attr("stroke-width", nodeStrokeWidth)
.selectAll("circle")
.data(nodes)
.join("circle")
.style("fill", "red")
.attr("r", function(d) { // scales node size depending on nb of links it is related to
d.weight = link.filter(function(l) {
return l.source.index == d.index || l.target.index == d.index
}).size();
var minRadius = nodeRadius;
return minRadius + (d.weight * 2);})
