D3 - 由弧边

Question

我开始与D3玩计算位置和元件的旋转，我想实现这一结果：

我做这个事情弧，但我不”不知道如何计算三角形的位置和旋转？这是我当前的代码：（http://jsfiddle.net/spbGh/1/）

var width = 220, 
    height = 120; 

var convertValue = function (value) { 
    return value * .75 * 2 * Math.PI; 
} 

var arc = d3.svg.arc() 
    .innerRadius(45) 
    .outerRadius(60) 
    .startAngle(0); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")") 

var big_background = svg.append("path") 
    .datum({ endAngle: convertValue(1)}) 
    .style("fill", "#f3f4f5") 
    .attr("d", arc); 

var big_gain = svg.append("path") 
    .datum({ endAngle: convertValue(.75) }) 
    .style("fill", "orange") 
    .attr("d", arc); 

// HELP with this thing!!! 
var triangle = svg.append('path') 
    .style("fill", "orange") 
    .attr('d', 'M 0 0 l 4 4 l -8 0 z') 

Answer 1

您需要设置相应的transform属性：

.attr("transform", 
    "translate(" + Math.cos(convertValue(.127)-Math.PI/2)*70 + "," + 
      Math.sin(convertValue(.127)-Math.PI/2)*70 + ")" + 
      "rotate(" + ((convertValue(.127)*180/Math.PI)+180) + ")") 

它变成如果绘制三角形倒过来更容易一点。更新了jsfiddle here。