devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

D3.js之饼图_html d3 饼形图

作者：很楠不爱3 | 2024-02-23 01:19:04

赞

踩

html d3 饼形图

一.绘制饼图的步骤：

  1. 添加svg并添加svg属性(width, height); 
    1.   <script type="text/javascript">
    2.     var width = 400;      //设置svg区域的宽度
    3.     var height = 400;     //设置svg区域的高度
    4.  
    5.     var svg = d3.select('body')               //选择body区
    6.             	.append('svg')                //在body中添加svg
    7.             	.attr('width', width)					//将宽度赋给width属性
    8.             	.attr('height', height);      //将高度赋给height属性
    9.  
    10.   </script>

     

  2. 确定初始数据； 
    1. //确定初始数据
    2.     var dataset = [['小米', 22.5], ['华为', 32.7], ['中兴', 14.2], ['努比亚', 22.1], ['联想', 14.2], ['其他', 10.3]];

     

  3. 转换数据； 
    1.     //转换数据
    2.     var pie = d3.layout.pie()
    3.     			 .value(function (d) { return d[1]; });
    4.     var piedata = pie(dataset);
    5.     console.log(piedata);

     

  4. 绘制；
  • 外半径和内半径 
    1.     //外半径和内半径
    2.     var outerRadius = width / 3;
    3.     var innerRadius = 0;

     

  • 创建弧生成器
  1.     //创建弧生成器
  2.     var arc = d3.svg.arc()
  3.     								.innerRadius(innerRadius)
  4.     								.outerRadius(outerRadius);
  5.     var color = d3.scale.category20();
  • 添加对应数目的弧组，即<g>元素
  1.     var arcs = svg.selectAll('g')
  2.     			.data(piedata)        //绑定转换后的数据，即piedata
  3.     			.enter()
  4.     			.append('g')
  5.     			.attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')');
  • 添加弧的路径元素
  1.     //添加弧的路径元素
  2.     arcs.append('path')
  3.     		.attr('fill', function(d,i) {
  4.     		  return color(i);         //设定弧的颜色
  5.     		})
  6.     		.attr('d', function(d) {
  7.     		  return arc(d);           //使用弧生成器
  8.     		});

效果图：

 

  • 添加弧内的文字元素 
    1.     //添加弧内的文字元素
    2.     arcs.append('text')
    3.     		.attr('transform', function(d) {
    4.     		  var x = arc.centroid(d)[0] * 1.4;      //文字的x坐标
    5.     		  var y = arc.centroid(d)[1] * 1.4;      //文字的y坐标
    6.     		  return 'translate(' + x + ',' + y + ')';
    7.     		})
    8.     		.attr('text-anchor', 'middle')
    9.     		.text(function(d) {
    10.     		  //计算市场份额和百分比
    11.     		  var percent = Number(d.value) / d3.sum(dataset, function(d) { return d[1]; }) * 100;
    12.     		  //保留一个小数点，末尾加一个百分号返回
    13.     		  return percent.toFixed(1) + '%';
    14.     		});

    效果图：

 

  • 添加连接弧外的直线元素 
    1.     //添加连接弧外的直线元素
    2.     arcs.append('line')
    3.     		.attr('stroke', 'black')
    4.     		.attr('x1', function(d) { return arc.centroid(d)[0] * 2; })
    5.     		.attr('y1', function(d) { return arc.centroid(d)[1] * 2; })
    6.     		.attr('x2', function(d) { return arc.centroid(d)[0] * 2.2; })
    7.     		.attr('y2', function(d) { return arc.centroid(d)[1] * 2.2; });

    效果图：

 

  • 添加弧外的文字元素 
    1.     arcs.append('text')
    2.     		.attr('transform', function(d) {
    3.     		  var x = arc.centroid(d)[0] * 2.5;
    4.     		  var y = arc.centroid(d)[1] * 2.5;
    5.     		  return 'translate(' + x + ',' + y + ')';
    6.     		})
    7.     		.attr('text-anchor', 'middle')
    8.     		.text(function(d) {
    9.     		  return d.data[0];
    10.     		});

    效果图：

 

全部代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<script src="https://cdn.bootcss.com/d3/3.2.1/d3.js"></script>
  7. </head>
  8. <body>
  9.   <script type="text/javascript">
  10.     var width = 400;      //设置svg区域的宽度
  11.     var height = 400;     //设置svg区域的高度
  12.  
  13.     var svg = d3.select('body')               //选择body区
  14.             		.append('svg')                //在body中添加svg
  15.             		.attr('width', width)					//将宽度赋给width属性
  16.             		.attr('height', height);      //将高度赋给height属性
  17.  
  18.     //确定初始数据
  19.     var dataset = [['小米', 22.5], ['华为', 32.7], ['中兴', 14.2], ['努比亚', 22.1], ['联想', 14.2], ['其他', 10.3]];
  20.  
  21.     //转换数据
  22.     var pie = d3.layout.pie()
  23.     									 .value(function (d) { return d[1]; });
  24.     var piedata = pie(dataset);
  25.     console.log(piedata);
  26.  
  27.     //外半径和内半径
  28.     var outerRadius = width / 3;
  29.     var innerRadius = 0;
  30.  
  31.     //创建弧生成器
  32.     var arc = d3.svg.arc()
  33.     								.innerRadius(innerRadius)
  34.     								.outerRadius(outerRadius);
  35.     var color = d3.scale.category20();
  36.  
  37.     //添加对应数目的弧组，即<g>元素
  38.     var arcs = svg.selectAll('g')
  39.     							.data(piedata)
  40.     							.enter()
  41.     							.append('g')
  42.     							.attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')');
  43.  
  44.     //添加弧的路径元素
  45.     arcs.append('path')
  46.     		.attr('fill', function(d,i) {
  47.     		  return color(i);         //设定弧的颜色
  48.     		})
  49.     		.attr('d', function(d) {
  50.     		  return arc(d);           //使用弧生成器
  51.     		});
  52.  
  53.  
  54.     //添加弧内的文字元素
  55.     arcs.append('text')
  56.     		.attr('transform', function(d) {
  57.     		  var x = arc.centroid(d)[0] * 1.4;      //文字的x坐标
  58.     		  var y = arc.centroid(d)[1] * 1.4;      //文字的y坐标
  59.     		  return 'translate(' + x + ',' + y + ')';
  60.     		})
  61.     		.attr('text-anchor', 'middle')
  62.     		.text(function(d) {
  63.     		  //计算市场份额和百分比
  64.     		  var percent = Number(d.value) / d3.sum(dataset, function(d) { return d[1]; }) * 100;
  65.     		  //保留一个小数点，末尾加一个百分号返回
  66.     		  return percent.toFixed(1) + '%';
  67.     		});
  68.  
  69.     //添加连接弧外的直线元素
  70.     arcs.append('line')
  71.     		.attr('stroke', 'black')
  72.     		.attr('x1', function(d) { return arc.centroid(d)[0] * 2; })
  73.     		.attr('y1', function(d) { return arc.centroid(d)[1] * 2; })
  74.     		.attr('x2', function(d) { return arc.centroid(d)[0] * 2.2; })
  75.     		.attr('y2', function(d) { return arc.centroid(d)[1] * 2.2; });
  76.  
  77.     //添加弧外的文字元素
  78.     arcs.append('text')
  79.     		.attr('transform', function(d) {
  80.     		  var x = arc.centroid(d)[0] * 2.5;
  81.     		  var y = arc.centroid(d)[1] * 2.5;
  82.     		  return 'translate(' + x + ',' + y + ')';
  83.     		})
  84.     		.attr('text-anchor', 'middle')
  85.     		.text(function(d) {
  86.     		  return d.data[0];
  87.     		});
  88.   </script>
  89. </body>
  90. </html>

 

 

 

 

 

 

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/132643
推荐阅读

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。