d3.arc()圆弧生成器
- 如果开始与结束之间的角度差大于π，将会生成一个圆或环；如果小于π，弧用圆角和角填充。
- 弧的中心点默认在(0,0)，需要使用transform来改变中心位置
let arcA = d3.arc();
arcA({
innerRadius: 0,
outerRadius: 100,
startAngle: 0,
endAngle: Math.PI / 2
}); //M0,-100A100,100,0,0,1,100,0L0,0Z
- 如果将半径和角度定义为常量，则可以生成没有任何参数的弧
let arcB=d3.arc()
.innerRadius(0)
.outerRadius(100)
.startAngle(0)
.endAngle(Math.PI / 2);
arcB(); //M0,-100A100,100,0,0,1,100,0L0,0Z
- 常用方法：
- arc.centroid：计算圆弧的中心点
- arc.innerRadius([radius]) 设置或返回内部的半径
- arc.outerRadius([radius]) 设置或返回外部的半径
- arc.startAngle([angle]) 设置或返回起始角度
- arc.endAngle([angle]) 设置或返回结束角度
- arc.padAngle([angle]) 设置或返回弧之间的夹角
- arc.padRadius([radius]) 设置或返回线性填充半径
- arc.context 设置或返回渲染上下文
d3.pie()饼生成器
- 用来生成圆弧所需的角度数据
let data = [1, 1, 2, 3, 5, 8, 13, 21];
let arcs = d3.pie()(data);
- 返回的数据为:
[
{"data": 1, "value": 1, "index": 6, "startAngle": 6.050474740247008, "endAngle": 6.166830023713296, "padAngle": 0},
{"data": 1, "value": 1, "index": 7, "startAngle": 6.166830023713296, "endAngle": 6.283185307179584, "padAngle": 0},
{"data": 2, "value": 2, "index": 5, "startAngle": 5.817764173314431, "endAngle": 6.050474740247008, "padAngle": 0},
{"data": 3, "value": 3, "index": 4, "startAngle": 5.468698322915565, "endAngle": 5.817764173314431, "padAngle": 0},
{"data": 5, "value": 5, "index": 3, "startAngle": 4.886921905584122, "endAngle": 5.468698322915565, "padAngle": 0},
{"data": 8, "value": 8, "index": 2, "startAngle": 3.956079637853813, "endAngle": 4.886921905584122, "padAngle": 0},
{"data": 13, "value": 13, "index": 1, "startAngle": 2.443460952792061, "endAngle": 3.956079637853813, "padAngle": 0},
{"data": 21, "value": 21, "index": 0, "startAngle": 0.000000000000000, "endAngle": 2.443460952792061, "padAngle": 0}
]
- 常用方法：
- pie.value([value]) 设置值访问器
let data = [
{"number": 4, "name": "Locke"},
{"number": 8, "name": "Reyes"},
{"number": 15, "name": "Ford"},
{"number": 16, "name": "Jarrah"},
{"number": 23, "name": "Shephard"},
{"number": 42, "name": "Kwon"}
];
let arcs = d3.pie()
.value(function(d) { return d.number; })
(data);
- pie.sort([compare]) 数据比较器：排序并不影响生成弧的顺序，弧的顺序始终与输入数组的顺序一致，排序只是影响每个弧的生成角度。第一个弧从起始角开始，最后一个弧在结束角结束
pie.sort(function(a, b) { return a.name.localeCompare(b.name); });
- pie.sortValues([compare]) 值比较器
pie.sortValues(function(a, b) { return a - b; });
- pie.startAngle 设置或返回整体的起始角度
- pie.endAngle 设置或返回整体的结束角度
- pie.padAngle 设置或返回相邻弧间隔角度
绘制饼图
//假数据
let data= [
{ name: '购物', value: 983 },
{ name: '饮食', value: 300 },
{ name: '医药', value: 1400 },
{ name: '交通', value: 402 },
{ name: '杂费', value: 234 }
];
let svg = d3.select(this.$refs.pieSvg);
this.container = svg.append("g")
.attr("transform", `translate(0,0)`);
//生成饼图数据
let pieData = d3.pie()
.value(function (d) {
return d.value;
})
(data);
let colorArr = ['#fe4365', '#fc9d9a', '#f9cdad', '#c8c8a9', '#83af9b'];
//let colorArr=d3.schemeCategory10;
//颜色比例尺
let color = d3.scaleOrdinal()
.domain(d3.range(pieData.length))
.range(colorArr);
//弧线生成器
let arc = d3.arc()
.innerRadius(30)
.outerRadius(120);
let gs = this.container.selectAll(".pie")
.data(pieData)
.enter()
.append("g")
.attr("transform", `translate(300,175)`);
gs.append("path")
.attr("d", function (d, i) {
return arc(d);
})
.attr("fill", function (d, i) {
return color(i);
});
gs.append("text")
.attr("class", 'pieText')
.attr("transform", function (d) {
return `translate(${arc.centroid(d).join()})`
})
.text(function (d) {
return d.data.name
})
.attr("text-anchor", 'middle')
