title: Get arrowheads to point at outer edge of node in D3
body: <p>I'm new to D3 and I'm trying to create an interactive network visualization.  I've copied large parts of <a href="http://bl.ocks.org/mbostock/1153292" rel="noreferrer">this</a> example, but I have changed the curved lines to straight ones by using SVG "lines" rather than "paths", and I've also scaled the nodes according to the data they represent.  The problem is that my arrowheads (created with SVG markers) are at the ends of the lines.  Since some of the nodes are large, the arrows get hidden behind them.  I'd like my arrowheads to show up right at the outside edge of the node they point to.</p>
  
  <p>Here is how I'm creating the markers and links:</p>
  
  <pre><code>svg.append("svg:defs").selectAll("marker")
      .data(["prereq", "coreq"])
      .enter().append("svg:marker")
      .attr("id", String)
      .attr("viewBox", "0 -5 10 10")
      .attr("refX", 15)
      .attr("markerWidth", 6)
      .attr("markerHeight", 6)
      .attr("orient", "auto")
      .append("svg:path")
      .attr("d", "M0,-5L10,0L0,5");
  
  var link = svg.selectAll(".link")
      .data(force.links())
      .enter().append("line")
      .attr("class", "link")
      .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });
  </code></pre>
  
  <p>I noticed that the "refX" attribute specifies how far from the end of the line the arrowhead should show up.  How can I make this dependent on the radius of the node it's pointing to?  If I can't do that, could I instead change the endpoints of the lines themselves?  I'm guessing I would do that in this function, which resets the endpoints of the lines as everything moves:</p>
  
  <pre><code>function tick() {
          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; });
  
          circle.attr("transform", function(d) {
              return "translate(" + d.x + "," + d.y + ")";
          });
  
          text.attr("transform", function(d) {
              return "translate(" + d.x + "," + d.y + ")";
          });
      }
  </code></pre>
  
  <p>Which approach makes more sense, and how would I implement it?</p>