关于圆（1）— 基础饼图

来源：互联网发布：李小璐淘宝店关了吗编辑：程序博客网时间：2024/05/29 21:17

1. 前言

由于工作需要，接触了d3.js，由此产生了浓厚的兴趣，每一次看到图表鲜活起来都觉得特别有意思。虽然由于基础太差，有时候一个小点都要纠结好久。。。但是纠结出来的那一刹那有一种“幼儿园得小红花”的感觉。因此为了更系统的学习和整理一下自己接触数据可视化，学习d3.js的过程，因此跟做UI的小伙伴开了这个博客，希望自己坚持下去。代码多来源于馒头华华的《精通d3.js》,或者：bl.ocks.org/mbostock，http://codepen.io/，自己也会加上一些修修补

2. 从“饼图”开始

想先写一系列的饼图，由简单到复杂，慢慢的介绍一些d3.js的基本知识。而且还没有弄好网站，只能先放图片和本地链接（外部访问不了，只能自己看）。

（一）基础饼图

数据： var dataset = [ 30 , 10 , 43 , 55 , 13 ]；写在源代码里

交互：无

知识点： 1） d3.js 里关于圆的布局（数据转换）：d3.layout.pie()

2）画圆：弧生成器；自定义颜色；添加文本；

3）svg的路径：可以组成任何形状的形状

点击打开链接

-------------------------------------------------------------------------------------------------------------------------------------------------------

<html>    <head>          <meta charset="utf-8">          <title>基础饼图</title>  </head> <style></style>    <body>  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>          <script>var width  = 600;//SVG绘制区域的宽度var height = 600;//SVG绘制区域的高度var dataset = [ 30 , 10 , 43 , 55 , 13 ]; //画图所用数据var svg = d3.select("body")//选择<body>.append("svg")//在<body>中添加<svg>.attr("width", width)//设定<svg>的宽度属性.attr("height", height);//设定<svg>的高度属性var pie = d3.layout.pie(); //布局（数据转换）：piedata 就是dataset转换后的数据var piedata = pie(dataset);var outerRadius = 150;//外半径var innerRadius = 0;//内半径，为0则中间没有空白       // 弧生成器：能够生成弧的路径，因为饼图的每一部分都是一段弧。       // 弧生成器返回的结果赋值给 arc。此时，arc 可以当做一个函数使用，把 piedata 作为参数传入，即可得到路径值var arc = d3.svg.arc()//弧生成器 //添加对应数目的弧组，即<g>元素.innerRadius(innerRadius)//设置内半径.outerRadius(outerRadius);//设置外半径<!--var color = d3.scale.category10(); //有十种颜色的颜色比例尺-->        var color=[d3.rgb(23,50,7),d3.rgb(153,77,82),d3.rgb(217,116,43),d3.rgb(230,180,80),d3.rgb(227,230,195)]var arcs = svg.selectAll("g")  //在 svg 里添加添加对应数目的弧组，即<g>元素  .data(piedata)   //绑定转换后的数据piedata  .enter()  .append("g")  .attr("transform","translate("+ (width/2) +","+ (width/2) +")");//对每个 g 元素，添加 patharcs.append("path").attr("fill",function(d,i){<!--return color(i);-->  //如果是用颜色函数return color[i] //设定弧的颜色：自定义颜色数组}).attr("d",function(d){return arc(d);  //调用弧生成器，得到路径值});//在每一个弧线中心添加文本arcs.append("text").attr("transform",function(d){return "translate(" + arc.centroid(d) + ")";}).attr("text-anchor","middle") //文本位置.text(function(d){return d.data;});<!--console.log(dataset);--><!--console.log(piedata);-->          </script>      </body>  </html>

0 0