記錄一下這個餅圖的寫法
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; // 內(nèi)半徑
var outerRadius = 100; // 外半徑
var arc_generator = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
// 通過餅圖布局轉(zhuǎn)換數(shù)據(jù)
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); // 設(shè)置顏色
})
// 添加文字
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>
創(chuàng)建這個餅圖的步驟和其他的圖都是一樣的
1.先利用布局將數(shù)據(jù)轉(zhuǎn)換為畫圖可以用的數(shù)據(jù)格式，這里d3.pie()就可以將簡單的數(shù)組數(shù)據(jù)轉(zhuǎn)化為換扇形需要的數(shù)據(jù)格式
2.再利用弧線生氣器畫出扇形。這里設(shè)置了兩個屬性：innerRadius和outerRadius。 分別時扇形內(nèi)半徑和外半徑。如果這里將innerRadius設(shè)置為80，畫出的餅圖就會使下面這樣
simplePie2.png
