title: D3 SVG positioning arrowhead on path
body: <p>I'm visualizing a force lay-out network with D3 and I have a problem with positioning the arrowheads along the edges between my nodes. As you can see in the picture, I am scaling the size of my nodes according to the value of a property of each node. Basically I need some sort of method to dynamically caculate/change the position of my arrowhead on my edges (according to same value used for scaling the nodes)  to make them visible and prevent them from overlapping with the nodes. Actually I want my arrowheads to "touch" the outer edge of my nodes. Does anyone a way to do this? These code fragments show how I create my arrowheads. Maybe I should use another way?</p>
  
  <p>p.s. I know I can change to order of my drawings to draw the arrowheads on top of my nodes but that's not what I want.</p>
  
  <p><a href="https://i.stack.imgur.com/cvWFH.png" rel="noreferrer"><img src="https://i.stack.imgur.com/cvWFH.png" alt="enter image description here"></a></p>
  
  <pre><code>...
  
  svg.append("defs").append("marker")
  .attr("id", "arrowhead")
  .attr("refX", 5) /*must be smarter way to calculate shift*/
  .attr("refY", 2)
  .attr("markerWidth", 6)
  .attr("markerHeight", 4)
  .attr("orient", "auto")
  .append("path")
      .attr("d", "M 0,0 V 4 L6,2 Z");
  
  ...
  
   path.enter()
          .append("svg:path")
          .attr("class", function (d) {
              return "link " + d.type;
          })
          .attr("id", function (d) {
              return "path_" + d.id;
          })
          .attr("marker-end", "url(#arrowhead)")
          .transition().duration(8000)
          .style("stroke-width", stylePathStrokeWidth)
  ...
  </code></pre>