记录一下这个饼图的写法
simplePie.png
画饼图就是扇形+文字的组合。就两个知识点的运用:
1.饼图布局d3.pie()
2.弧形生成器d3.arc()
直接先贴代码
<body>
<svg height="960" width="800"></svg>
<script>
initMap();
function initMap() {
var marge = { top: 60, right: 60, bottom: 60, left: 60 },
svg = d3.select('svg'),
width = svg.attr('width'),
height = svg.attr('height');
var g = svg.append('g')
.attr('transform', 'translate('+ marge.top +', '+ marge.left +')')
var dataset = [25, 15, 33, 68, 18]
// 一个颜色比例尺
var colorScale = d3.scaleOrdinal()
.domain(d3.range(dataset.length))
.range(d3.schemeCategory10);
// 饼图布局
var pie = d3.pie();
// 弧线生成器
var innerRadius = 0; // 内半径
var outerRadius = 100; // 外半径
var arc_generator = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
// 通过饼图布局转换数据
var pieDate = pie(dataset);
console.log("pieDate:" + pieDate);
// ***************绘制******************
var gs = g.selectAll('.g')
.data(pieDate)
.enter()
.append('g')
.attr('transform', 'translate('+ width / 2 +', '+ height / 2 +')')
// 绘制扇形
gs.append('path')
.attr('d', function (d) {
return arc_generator(d);
})
.attr('fill', function (d, i) {
return colorScale(i); // 设置颜色
})
// 添加文字
gs.append('text')
.attr('transform', function (d) {
return 'translate('+ arc_generator.centroid(d) +')'; // 中心位置
})
.attr('text-anchor', 'middle')
.attr('fill', '#eee')
.text(function (d, i) {
return d.data;
})
}
</script>
</body>
创建这个饼图的步骤和其他的图都是一样的
1.先利用布局将数据转换为画图可以用的数据格式，这里d3.pie()就可以将简单的数组数据转化为换扇形需要的数据格式
2.再利用弧线生气器画出扇形。这里设置了两个属性：innerRadius和outerRadius。 分别时扇形内半径和外半径。如果这里将innerRadius设置为80，画出的饼图就会使下面这样
simplePie2.png
目前这个简单的饼图就没什么好说的了。但这样最最基本的饼图也只能学习的时候做出来才能有一点点的满足感。放在真正的项目中就显得太初级了，到时候就你得需要对细节的处理更多了，当然也要用到更多的api方法和属性了。
网友评论