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

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

1 个答案: