title: How to get arrowheads at both ends of arc path element?
body: <p>I am using d3.svg.arc() to draw a segment of a circle setting the inner and outer radii to be the same and with some random sweeping angle. And now I want to get arrow heads on both ends of it. The marker-start property is working fine. But the problem is with marker-end. When I am running the code, I am getting both the markers at the start itself. Please help me out.</p>
  
  <pre><code>&lt;svg version="1.1"&gt;
  &lt;defs&gt;
      &lt;marker id="endtriangle"
    viewBox="0 0 10 10" refX="0" refY="5" 
    markerUnits="strokeWidth"
    markerWidth="4" markerHeight="3"
    orient="auto"&gt;
      &lt;path d="M 0 0 L 10 5 L 0 10 z" /&gt;
      &lt;/marker&gt;
      &lt;marker id="starttriangle"
    viewBox="0 0 10 10" refX="5" refY="5" 
    markerUnits="strokeWidth"
    markerWidth="4" markerHeight="3"
    orient="auto"&gt;
      &lt;path d="M -2 5 L 8 0 L 8 10 z" /&gt;
      &lt;/marker&gt;
  &lt;/defs&gt;
  &lt;/svg&gt;
  &lt;script type="text/javascript"&gt;
  var arc=d3.svg.arc()
      .innerRadius(140)
      .outerRadius(140)
      .startAngle(0)
      .endAngle(Math.PI/3)
  d3.select("svg").append("path")
          .attr("d",arc)
          .attr("transform","translate(200,200)")
          .attr("stroke","black")
          .attr("marker-end","url(#endtriangle)")
          .attr("marker-start","url(#starttriangle)")
          .attr("fill","none")
          .attr("stroke-width","10")
          .attr("id","dimen")
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>