D3.js实现饼状图的方法详解

站长资源 2024/11/28 佚名

17 1538 17

DDR爱好者之家 Design By 杰米

前言

小编在之前已经跟大家分享过关于怎样用柱状图和折线图这两种基本图表。这两种图表都是有坐标轴的，现在来说一种没有坐标轴的图表——饼图。

饼状图实现

还是和之前一样，我们先把简单的画图框架搭起来，添加SVG画布。但是这里需要注意的是，为了方便后面画饼图上的弧形，我们把组合这些元素的g元素移动到画布的中心：

<!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;
  }
 </style>
 </head>
 <body>
 <div class="container">
  <svg width="100%" height="100%"></svg>
 </div>
 <script src="/UploadFiles/2021-04-02/d3.v3.min.js">

模拟数据并转化


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


// 模拟数据
var dataset = [
 {name: '购物', value: 983},
 {name: '日常饮食', value: 300},
 {name: '医药', value: 1400},
 {name: '交通', value: 402},
 {name: '杂费', value: 134}
];


在柱状图等有坐标轴的图表中，我们通过创建合适的比例尺来将模拟好的数据转化成适合画图的数据，那在饼图里，又用什么来转化呢？看这里~


// 转换原始数据为能用于绘图的数据
var pie = d3.layout.pie()
  .sort(null)
  .value(function(d) {
   return d.value;
  });
// pie是一个函数 
var pieData = pie(dataset);


layout叫做布局，在D3.js中它提供了一些转化成特定图表数据的函数，如其中就包括饼图。它提供一个基础的转化函数，在此基础上我们根据自己的需要再对该函数进行进一步的设置，就得到了如上述代码中pie变量保存的函数一样的转化工具，通过把原始的数据dataset传入pie中就能得到绘图数据pieData。
具体的变化我们可以看下图。


左边是转化前的原始的数据结构，右边是转化后的适合绘图的数据结构。可以看到，在保留原本的数据的基础上，转化后的数据新增了该项在整个饼图中的起始角度（startAngle和endAngle），以及弧形之间的间隙角度（padAngle）。
计算弧形路径


在饼图中，我们用SVG中的path元素来表示每一块弧形，而从pieData到path元素的d属性还是有一定的距离，所以我还需要再通过一步操作来用pieData计算出d属性可用的值。


// 创建计算弧形路径的函数
var radius = 100;
var arc = d3.svg.arc()
 .innerRadius(0)
 .outerRadius(radius); 


添加弧形


上面的代码用svg.arc()创建了一个计算弧形路径的函数，通过这个函数就可以计算出path的d属性的值，就像下面这样。


// 添加弧形
main.selectAll('g')
 .data(pieData)
 .enter()
 .append('path')
 .attr('fill', function(d, i) {
  return getColor(i);
 })
 .attr('d', function(d){
  return arc(d);
 });


好了，饼图就这样画好了。

下面给大家分享个实例代码，实现饼图中加上下图这样的文字标签。
效果图

实例代码


<!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="/UploadFiles/2021-04-02/d3.v3.min.js">总结


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

d3.js,饼状图,d3.js,饼状图,图例,d3.js,饼状图添加图例

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“D3.js实现饼状图的方法详解”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

D3.js实现饼状图的方法详解

AngularJs ng-repeat 嵌套如何获取外层$index

angularJS Provider、factory、service详解及实例代码

评论“D3.js实现饼状图的方法详解”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接