序

边肖之前和大家分享过如何使用柱状图和折线图。这两张图表都有坐标轴。现在，没有坐标轴的图表称为——饼图。

蛋糕图实现

和以前一样，让我们建立一个简单的绘图框架，并添加SVG画布。但是，这里需要注意的是，为了稍后在饼图上绘制弧线，我们将组合这些元素的G元素移动到画布的中心：

！doctype html lang=' en ' head meta charset=' utf-8 ' title饼图/title style . container { margin : 30pxa uto；宽度： 600 px；height: 300pxborder: 1px固体# 000；}/style/head body div class=' container ' SVG width=' 100% ' height=' 100% '/SVG/div script src=' http :http://d3js . org/D3 . v3 . min . js ' charset=' utf-8 '/script script window . onload=function(){ var width=600，height=300//创建一个组来组合要绘制的图表元素，var main=d3.select('。containers VG’)。追加(' g ')。classed ('main '，true)//注意这个图表和之前的图表之间的区别。attr ('transform '，' translate ('width/2 '，')}；/script /body/html模拟数据并进行转换

为了画一个饼图，我们模拟了一些这样的数据。

//模拟数据var dataset=[{name: '购物'，value: 983}，{name: '日常饮食'，value: 300}，{name: '医药'，value: 1400}，{name: '交通'，在带轴的图表中，例如条形图，我们可以通过创建适当的比例将模拟数据转换为适合绘制的数据。饼图中有什么可以用来转换的？看这里~

//将原始数据转换为可用于绘图的数据。var pie=d3.layout.pie()。排序(空)。value(函数(d){ return d . value；});//pie是一个函数var pieData=pie(数据集)；布局叫做布局。在D3.js中，它提供了一些转换特定图表数据的功能，比如饼图。它提供了一个基本的转换函数，在此基础上，我们根据自己的需要进一步设置这个函数，得到的转换工具和上面代码中的pie变量保存的函数一样。绘图数据pieData可以通过将原始数据数据集传输到PIE中来获得。

具体变化见下图。

左边是转换前的原始数据结构，右边是适合绘图的转换后的数据结构。可以看出，在保留原始数据的基础上，将项目在整个饼图中的起始角(startAngle和endAngle)和弧之间的间隙角(padAngle)加入到变换后的数据中。

计算圆弧路径

在饼图中，我们用SVG中的path元素来表示每一条弧线，但是pieData到path元素的D属性还有一定的距离，所以我需要用pieData通过多一个操作来计算D属性的可用值。

//创建函数var radius=100来计算圆弧路径；var arc=d3.svg.arc()。内半径(0)。外半径；添加弧线

上面的代码使用svg.arc()创建了一个计算圆弧路径的函数，通过这个函数可以计算出路径的D属性的值，如下图所示。

//添加弧主。选择全部(' g ')。数据(piedata)。输入()。追加('路径')。attr ('fill '，函数(d，I){ return getcolor(I)；}) .attr('d '，函数(d){返回弧(d)}；});好的，饼图是这样画的。

让我们分享一个示例代码来实现饼图中如下图所示的文本标签。

翻译

示例代码

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title饼图/title样式。集装箱{ margin: 30px auto宽度： 600像素；高： 300pxborder: 1px固体# 000;}折线{ fill : nonestroke : # 000000笔画宽度： 2px笔画数组： 5px}/style/head body div class=' container ' SVG width=' 100% ' height=' 100% '/SVG/div script src=' http :http://d3js。组织/D3。v3。量滴js ' charset=' utf-8 '/脚本脚本窗口。onload=function(){ var width=600，height=300//创建一个分组用来组合要画的图表元素var main=d3.select(' .容器' SVG ' .追加(' g ').已分类(“主”，真的).attr('transform '，' translate '(width/2 '，' height/2 ')；//模拟数据定义变量数据集=[ {name: '购物，value: 983}，{name: '日常饮食，value: 300}，{name: '医药，value: 1400}，{name: '交通，value: 402}，{name: '杂费，值： 134 }]；//转换原始数据为能用于绘图的数据var pie=d3.layout.pie().排序（空)。值(函数{返回d .值；});//馅饼是一个函数var pieData=pie(数据集);//创建计算弧形路径的函数定义变量半径=100;var arc=d3.svg.arc().内半径(0)。外半径；var outarc=d 3。SVG。arc().内半径(1.2 *半径)。外半径(1.2 *半径);var oArc=d3.svg.arc().内半径(1.1 *半径)。外半径(1.1 *半径);var slices=main.append('g ').attr('class '，' slices ')；var line=main。追加(' g ').attr('class '，' line ')；var labels=main.append('g ').attr('class '，' labels ')；//添加弧形元素(g)中的路径)变化弧=切片。选择所有(' g ').数据(pieData).输入()。追加('路径')。attr('填充'，函数(d，I){返回GetColor(I)；}) .attr('d '，函数(d){返回弧(d)}；});//添加文字标签变量文本=标签。选择全部("文本")。数据(pieData).输入()。追加('文本')。attr('dy '，' 0.35em ').attr('填充'，函数(d，I){返回GetColor(I)；}) .文本(函数(d，I){返回d .数据。姓名；}) .样式('文本锚定'，函数(d，i) {返回midAngel(d)Math .PI？开始':'结束；}) .attr('转换'，函数(d，i) { //找出外弧形的中心点var pos=。质心(d );//改变文字标识的x坐标位置[0]=半径*(中间天使(d)数学？1.5 : -1.5);返回“翻译”(“pos”)；}) .样式('不透明度',1);多段线=线。选择全部("多段线")。数据(pieData).输入()。追加('折线')。attr('点，函数(d) {返回[弧。质心(d)电弧。质心(d)电弧。质心(d)]；}) .attr('点，函数{ var pos=Outarc。质心(d );位置[0]=半径*(中间天使(d)数学？1.5 : -1.5);返回[oArc。质心(d)out arc。质心(d)位置]；}) .样式('不透明度',0.5);};函数midAngel(d){ return d . start angle(d . endangle-d . start angle)/2；}函数GetColor(idx){ var palette=[' # 2e C7 c 9 '，' #b6a2de '，' #5ab1ef '，' #ffb980 '，' #d87a80 '，' #8d98b3 '，' #e5cf0d '，' #97b552 '，' #95706d '，' #dc69aa '，' #07a2a4 '，' #9a7fd1 '，' #588dd5 '，' # F9 aa ' } }脚本/正文/html总结

以上就是利用D3.js实现饼图的全部内容，希望这篇文章对大家的学习和工作能有所帮助。如果有疑问大家可以留言交流，小编还会陆续更新关于D3.js的文章，请大家继续关注我们。