title: Putting an arrow (marker) at specific point on a path when using the d3 javascript library
body: <p>I am working currently on a graph visualization and I use SVG and the D3 library. I was asked by our designer if I can put the arrowheads of the edges of the graph on a position corresponding to 80% of length of the lines.
  I was able to achieve the first part - getting the position - by using the <em>getPointAtLength</em> method. </p>
  
  <pre><code>var svg = d3.select("body").append("svg")
     .attr("width", 960)
     .attr("height", 500)
  
  var path = svg.append("path")
     .attr("d", "M20,20C400,20,20,400,400,400")
     .attr("fill", "none")
     .attr("stroke", "black");
  
  var pathEl = path.node();
  
  var pathLength = pathEl.getTotalLength();
  
  var pathPoint = pathEl.getPointAtLength(pathLength*0.5);
  
  var point = svg.append("svg:circle")
     .style("fill", "red")
     .attr("r", 5)
     .attr("cx", pathPoint.x)
     .attr("cy", pathPoint.y);
  </code></pre>
  
  <p>Here is a <a href="http://jsfiddle.net/bPfB7/">jsfidle example</a> </p>
  
  <p>Now I wonder how ca I attach an arrowhead to this position with corresponding orientation. More important how can I do this so I can update the edges of the graph when moving the associated nodes.
  I was not able to find any answer yet, the examples on "markers" are working with path properties like : <em>style('marker-end', "url(#end-arrow)")</em></p>