使用D3.js动态数据绘制饼状图

最新推荐文章于 2023-10-20 11:36:10 发布

xinxiaoyong

最新推荐文章于 2023-10-20 11:36:10 发布

阅读量2.3k

点赞数

分类专栏： svg画图文章标签：使用D3.js动态绘制饼状图 d3绘制饼状图 d3动态绘图

本文链接：https://blog.csdn.net/xinxiaoyonng/article/details/106654974

版权

svg画图专栏收录该内容

7 篇文章 2 订阅

订阅专栏

一、先看效果图：

二、数据截图：数据与HTML文件在同一目录级别：

三、代码详情：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>d3绘制饼状图</title>
   </head>
   <body>
       <div id="container"></div>
       <script type="text/javascript" src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
       <script type="text/javascript">

           d3.csv('./d3-data.csv',type,function(data1){
               // 定义饼状图数据回调函数返回的data
               var data = data1

//定义容器的宽高
               var width = 500
               var height = 500

               var svg = d3.select('#container')// 容器元素选择
                   .append('svg') //并向其内添加一个svg元素
                   .attr('width',width) //设置宽高
                   .attr('height',height)

               var g = svg.append('g') //向svg元素中添加一个g 元素
                       .attr('transform','translate(200,300)') //定义偏移量，也就是圆中心点的位置

               // 定义饼状图
               var arc = d3.svg.arc()
                       .innerRadius(50) //圆环起始半径
                       .outerRadius(100) //圆环结束半径
// .startAngle(0) //圆环起始角度 - 注释
// .endAngle(360 * Math.PI/180) //圆环的结束角度-极坐标 -注释

               // 设置动态数据填充
               var arc_data= d3.layout.pie()
                       .value(function(d){return d.year})

               // 定义颜色
               var color = d3.scale.category10()

               // 定义填充路径
               g.selectAll('path')
                   .data(arc_data(data)) //数据填充
                   .enter()
                   .append('path')
                   .attr('d',arc)
                   .style('fill',function(d,i){ return color(i)}) //为每个扇形填充不同颜色

               // 添加文字
               g.selectAll('text')
                   .data(arc_data(data))
                   .enter()
                   .append('text')
                   .text(function(d){ return d.data.year}) //填充不同文字内容
                   .attr('transform',function(d){ return 'translate('+arc.centroid(d)+')'}) //设置文字偏移
                   .attr('text-anchor','middle') //设置文字位置区域为，扇形区域内

           })

           // year数据类型转换: String -> Number
           function type(d){
               d.year = +d.year
               return d
           }
       </script>
   </body>
</html>

xinxiaoyong

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
使用D3.js动态数据绘制饼状图

一、先看效果图：二、数据截图：数据与HTML文件在同一目录级别：三、代码详情：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>d3绘制饼状图</title> </head> <body> <div id="container"></...
复制链接

扫一扫