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。