1

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:

markers dont hit link

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?

Gerardo Furtado
  • 100,839
  • 9
  • 121
  • 171
Daniel
  • 183
  • 3
  • 11
  • 1
    Stack snippet is for running code only, I just removed it. Also, please provide your simulation, so you can get a working answer. – Gerardo Furtado Dec 18 '17 at 11:18
  • See similar question [here](https://stackoverflow.com/questions/41226734/align-marker-on-node-edges-d3-force-layout/41229068#41229068) – Mark Dec 18 '17 at 11:33
  • @Mark thanks alot! Found the solution there. – Daniel Dec 19 '17 at 07:27

0 Answers0