d3 graph layout - arrows heads - layout

Question

I've seen several questions on how to move the arrowheads in directed graphs according to the radius of the nodes, but I can't figure out how to do it in my example : https://jsfiddle.net/Lx58yux4/
//arrows
svg.append("defs").selectAll("marker")
.data(["suit", "licensing", "resolved"])
.enter().append("marker")
.attr("id", function(d) { return d; })
.attr("viewBox", "0 -5 10 10")
.attr("refX", 25)
.attr("refY", 0)
.attr("markerWidth", 8)
.attr("markerHeight", 8)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5")
.style("stroke", "#4679BD")
.style("opacity", "0.6");
//onTick
force.on("tick", function () {
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;
})
.attr("y2", function (d) {
return d.target.y;
});
d3.selectAll("circle").attr("cx", function (d) {
//return d.x;
return d.x = Math.max(radius, Math.min(width - 10, d.x));
})
.attr("cy", function (d) {
return d.y = Math.max(radius, Math.min(height - 10, d.y));
//return d.y;
});
d3.selectAll("text").attr("x", function (d) {
return d.x;
})
.attr("y", function (d) {
return d.y;
});
node.each(collide(5.0)); //collision detection
});

Answer 1

Save node radius in data bond to the nodes.
node.append("circle")
.attr("r", function(d) {
d.radius = (10 + d.users/250);
return d.radius;
})
.style("fill", function (d) {
return color(d.group);
});
Now, update the links as shown below in tick function.
link.attr("x1", function (d) {
return d.source.x;
})
.attr("y1", function (d) {
return d.source.y;
})
.attr("x2", function (d) {
var diffX = d.target.x - d.source.x;
var diffY = d.target.y - d.source.y;
var pathLength = Math.sqrt((diffX * diffX) + (diffY * diffY));
var offsetX = (diffX * d.target.radius) / pathLength;
return d.target.x-offsetX;
})
.attr("y2", function (d) {
var diffX = d.target.x - d.source.x;
var diffY = d.target.y - d.source.y;
var pathLength = Math.sqrt((diffX * diffX) + (diffY * diffY));
var offsetY = (diffY * d.target.radius) / pathLength;
return d.target.y-offsetY;
});
Hope this helps.

Answer 2

Here is the fiddle :
https://jsfiddle.net/Lx58yux4/2/
It may need tweeking but basically you have to work out the difference between the center of the node to the outside and then get the vector between both nodes to move the arrow down. This uses pythagoras's theorum c=sqrt(a^2+b^2);
Here's the main bit of code :
function getVector(d) {
var x1 = d.target.x;
var y1 = d.target.y;
var x2 = d.source.x;
var y2 = d.source.y;
var a = x1 - x2; //difference in x
var b = y1 - y2; //difference in y
var c = Math.sqrt((a * a) + (b * b)); //single vector
var nodeRadius;
node.filter(function(e) {
return e.name === d.target.name; //return the links target
}).each(function(n,i) {
nodeRadius = 10 + n.users / 250 //as you had before, you could set this where you give it to the node
});
var vectorX = a / (c / nodeRadius );
var vectorY = b / (c / nodeRadius );
var thisVector = [vectorX, vectorY];
return thisVector;
}
Then use that in the x and y of the target
.attr("x2", function(d) {
var thisVector = getVector(d);
return d.target.x - thisVector[0];
})
.attr("y2", function(d) {
var thisVector = getVector(d);
return d.target.y - thisVector[1];
});
Notice this way the links dont go to the center, but to the outside. So really this way doesnt move the arrows down the link, but the links to the outside of the node which in turn move the arrows.