标记结束位置无法正常工作d3js

Question

I am trying to put marker at the end of arc. But it always placed at the start of the string.

and is there any way tht we can make marker also animate along with the arc.

Fiddle for same

<svg version="1.1" viewBox="0 0 1000 1000">
<defs>
    <marker id="endtriangle"
  viewBox="0 0 10 10" refX="0" refY="5" 
  markerUnits="strokeWidth"
  markerWidth="4" markerHeight="3"
  orient="auto" overflow="visible">
    <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>

    <path d="M -2 5 L 8 0 L 8 10 z" />
    </marker>
</defs>

</svg>

var arc=d3.svg.arc()
    .innerRadius(140)
    .outerRadius(140)
    .startAngle(0)
    .endAngle(Math.PI*1.5);

d3.select("svg").append("path")
        .attr("d",arc)
        .attr("transform","translate(200,200)")
        .attr("stroke","black")
        .attr("marker-end","url(#endtriangle)")
        .attr("fill","none")
        .attr("stroke-width","10")
        .attr("id","dimen");

http://jsfiddle.net/LL8y9wg9/

Answer 1

<svg version="1.1" viewBox="0 0 1000 1000">
  <defs>
   <marker id="endtriangle"
   viewBox="0 0 10 10" refX="7" refY="5" 
   markerUnits="strokeWidth"
   markerWidth="4" markerHeight="3"
   orient="auto" overflow="visible">

    <path d="M 10 0 L 5 10 L 0 0 z" />
   </marker>

 </defs>

</svg>


var svg = d3.select("svg");


    var data = [
        {startAngle: Math.PI*1.5, endAngle: 0}
    ];
    var arc = d3.svg.arc().outerRadius(140).innerRadius(140);
    svg.select("g").remove();
    svg.append("g")
        .attr("transform", "translate(200,200)")        
        .selectAll("path")
            .data(data)
        .enter()
            .append("path")
            .attr("stroke","black")
            .attr("marker-start","url(#endtriangle)")
            .attr("fill","none")
            .attr("stroke-width","10")
            .attr("id","dimen")
            .attr("class", "arc")
            .transition().duration(1000)
            .attrTween("d", function (d) { 
                var start = {startAngle: 0, endAngle: 0}; 
                var interpolate = d3.interpolate(start, d); 
                return function (t) {
                    return arc(interpolate(t));
                };
            });

Try this jsfiddle