1

私は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')
4

1 に答える 1

4

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を更新しました。

于 2013-06-20T13:32:22.047 に答える