I want to build an application with D3 V4 and have the following problem: I use a d3.forceSimulation and want to visualize circles. These circles can be connected with one or more links. For drawing the links I use this example.
But I want to have a marker on each link. For that I use this as example. But in my application I have a bigger radius of the circles, so the refX
is 70.5
. That causes that my marker doesn't hit the arc anymore and I need to adapt the refY
-attribute of the marker.
Screenshot:
I have tried to calculate the refY with the Pythagorean theorem in the ticked-method:
d3.selectAll("marker")
.attr("refY", function(d){
var dx = (d.target.x - d.source.x),
dy = (d.target.y - d.source.y),
dr = Math.sqrt(dx * dx + dy * dy),
unevenCorrection = (d.sameUneven ? 0 : 0.5),
arc = ((dr * d.maxSameHalf) / (d.sameIndexCorrected - unevenCorrection));
var hyp = Math.sqrt(refX*refX+arc*arc)
var offset = hyp - arc;
if(d.sameMiddleLink)
{
return 0;
}
else
{
return d.sameArcDirection === 0? offset:-offset;
}
})
;
But it still doesn't hit the link.
Can someone help me and show me what I am doing wrong?