標記結束位置不能正常工作d3js

Question

我想把標記放在弧的末尾。 但它總是放在字符串的開頭。

有沒有什麼方法可以讓我們的標記也隨着弧線變成動畫。

搗鼓相同

<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)); 
       }; 
      }); 

試試這個 jsfiddle