弧形表圖
var dataSet = [
// 定義多個接連弧形組成一個完整的圓
{startAngle: 0, endAngle: .6 * Math.PI},
{startAngle: .6 * Math.PI, endAngle: .7 * Math.PI},
{startAngle: .7 * Math.PI, endAngle: 1.25 * Math.PI},
{startAngle: 1.25 * Math.PI, endAngle: 1.65 * Math.PI},
{startAngle: Math.PI * 1.65, endAngle: 2 * Math.PI}
];
var arcPath = d3.svg.arc().innerRadius(0).outerRadius(150);
var color = d3.scale.category10();
var svg = d3.select("body").append("svg").attr("width", 400).attr("height", 400);
svg.selectAll("path").data(dataSet).enter().append("path").attr("d", function (d) {
return arcPath(d)
}).attr("stroke", function (d, i) {
return "white";
}).attr("transform", "translate(200,200)").attr("stroke-width", 1).attr("fill", function (d, i) {
return color(i);
});
svg.selectAll("text").data(dataSet).enter().append("text").attr("transform", function (d, i) {
// arcPath.centroid(d)獲取一段弧的中心點**數組**
// translate可以定義多個 表示一段一段距離后相對現在的位置接連移動一段距離
return "translate(200,200)" + "translate(" + arcPath.centroid(d) + ")";
}).attr("text-anchor", "middle").attr("fill", "white").attr("font-size", "18px").text(function (d) {
return Math.floor((d.endAngle - d.startAngle) * 180 / Math.PI) + " °";
})
結果:
弧形
