title: How to get intersection of link-edge and node in d3js?
body: <p>I want to have many node shapes (circle, square...) Here is my <a href="https://jsfiddle.net/v90z1L47/2/" rel="nofollow noreferrer">JSfiddle prototype</a> the problem is arrow placings:
  <a href="https://i.stack.imgur.com/r0Z2a.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r0Z2a.png" alt="enter image description here"></a></p>
  
  <p>They are created like this in js:</p>
  
  <pre class="lang-js prettyprint-override"><code>   svg.append('svg:defs').append('svg:marker')
       .attr('id', 'end-arrow')
       .attr('viewBox', '0 -5 10 10')
       .attr('refX', 6)
       .attr('markerWidth', 3)
       .attr('markerHeight', 3)
       .attr('orient', 'auto')
       .append('svg:path')
       .attr('d', 'M0,-5L10,0L0,5')
       .attr('fill', 'red');
  //...
     var link = svg.selectAll(".link")
       .data(graph.links)
       .enter().append("line")
       .attr("class", "link");
  </code></pre>
  
  <p>and css:</p>
  
  <pre class="lang-css prettyprint-override"><code>.link {
    stroke: #7a4e4e;
    stroke-width: 3px;
    stroke-opacity: 1;
    marker-end: url(#end-arrow);
  }
  </code></pre>
  
  <p>Arrows shall be where I drew <em>green marks</em>, yet they are in the centre (red marks). They are oriented correctly, yet misplaced. How to make arrows be on the intersection of link-edge and node in d3js?</p>