D3饼图
基于D3.js V4.0
先定义好基本数据
// 画布宽高
const width = 400;
const height = 400;
const dataset = [ 30 , 10 , 43 , 55 , 13 ] // 数据集
const outerRadius = 150; // 外半径
const innerRadius = 110; // 内半径
将数据集转换为创建饼图需要的数据
const piedata = d3.pie()(dataset); // 数据转换
创建一个颜色选择器
const color = d3.scaleOrdinal(d3.schemeCategory10);
创建圆弧生成器
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius)
.padAngle(0.02);
通过以上四步就可以开始制作饼图了。
在文档中添加一个画布
cosnt svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('width', height);
制作图形
const arcs = svg.selectAll('g')
.data(piedata)
.enter()
.append('g')
.attr('transform', 'translate(' + (width / 2) + ',' + (width / 2)+')')
arcs.append('path')
.attr('fill', (d, i) => {
return color(i);
})
.attr('d', (d) => {
return arc(d);
});
添加文本
arcs.append('text')
.attr('transform', (d) => {
return 'translate(' + arc.centroid(d) + ')';
})
.attr('fill', 'white')
.attr('text-anchor', 'middle')
.text((d) => {
return d.data;
});
