使用d3画饼图
最近在学习d3,先从一个简单的饼图开始吧！
原理基本很简单，
- 整合数据，让数据可以适合d3来画饼图，
// 模拟数据
var dataset = [
{name: '购物', value: 983},
{name: '日常饮食', value: 300},
{name: '医药', value: 1400},
{name: '交通', value: 402},
{name: '杂费', value: 134}
];
// 转换原始数据为能用于绘图的数据
var pie = d3.pie()
.sort(null)
.value(function(d) {
return d.value;
});
转换前数据
图片.png
转换后数据
图片.png
可以看到d3会对你的数据进行一些处理。
- 然后就是画圆弧，
// 创建计算弧形路径的函数
var radius = 100;
var arc = d3.arc()
.innerRadius(0)
.outerRadius(radius);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>饼图</title>
<style>
.container {
margin: 30px auto;
width: 600px;
height: 300px;
border: 1px solid #000;
}
polyline {
fill: none;
stroke: #000000;
stroke-width: 2px;
stroke-dasharray: 5px;
}
</style>
</head>
<body>
<div class="container">
<svg width="100%" height="100%"></svg>
</div>
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script>
window.onload = function() {
var width = 600, height = 300;
// 创建一个分组用来组合要画的图表元素
var main = d3.select('.container svg').append('g')
.classed('main', true)
.attr('transform', "translate(" + width/2 + ',' + height/2 + ')');
// 模拟数据
var dataset = [
{name: '购物', value: 983},
{name: '日常饮食', value: 300},
{name: '医药', value: 1400},
{name: '交通', value: 402},
{name: '杂费', value: 134}
];
// 转换原始数据为能用于绘图的数据
var pie = d3.pie()
.sort(null)
.value(function(d) {
return d.value;
});
console.log(dataset);
// pie是一个函数
var pieData = pie(dataset);
console.log(pieData);
// 创建计算弧形路径的函数
var radius = 100;
var arc = d3.arc()
.innerRadius(0)
.outerRadius(radius);
var slices = main.append('g').attr('class', 'slices');
// 添加弧形元素（g中的path）
var arcs = slices.selectAll('g')
.data(pieData)
.enter()
.append('path')
.attr('fill', function(d, i) {
return getColor(i);
})
.attr('d', function(d){
return arc(d);
});
};
function getColor(idx) {
var palette = [
'#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80',
'#8d98b3', '#e5cf0d', '#97b552', '#95706d', '#dc69aa',
'#07a2a4', '#9a7fd1', '#588dd5', '#f5994e', '#c05050',
'#59678c', '#c9ab00', '#7eb00a', '#6f5553', '#c14089'
]
return palette[idx % palette.length];
}
</script>
</body>
</html>
运行结果
图片.png
使用版本
d3 (http://d3js.org/d3.v4.min.js)；
测试浏览器
图片.png
（以后本博客中所有d3 都会基于现在的环境）
