javascript - 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 。