记录一下这个饼图的写法
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
