D3.js上手——饼状图

·  阅读 2640

饼状图是数据统计中经常用到的另一类图表,饼图可以直观地显示一个数据系列中各项的大小与各项总和的比例,本文将使用D3上手制作一个简单的饼状图

什么是布局

布局是D3中非常重要的内容,有了布局D3才能画出复杂的矢量图。但布局并不是直接绘制图形,只是将初始数据转换成容易画图的图形语言,画图工具能读懂图形语言来进行绘制。

在绘制饼状图中,例如有一组数据[1, 2, 3],只依靠这些数据是画不出的,需要将这些数据转化为圆形的起始角度和终止角度,第一块的角度区域为[0, π/3],第二块的角度区域为[π/3, π]……绘制工具能根据这些角度值进行绘制。布局只进行数据转换

D3还提供其他常用图表的布局函数,比如力导向图(Force)、弦图(Chord)、树状图(Tree)、直方图(Histogram)、分区图(Partition)等,每种布局有对应的API

确定数据

表格数据是来自w3schools的2016年9月的浏览器使用率

浏览器 占比
Chrome 72.5%
IE 5.3%
Firefox 16.3%
Safari 3.5%
Opera 1.0%
Others 1.4%

对此设定以下二维数组装载这些数据

var dataset = [['Chrome', 72.5], ['IE', 5.3], ['Firefox', 16.3], ['Safari', 3.5], ['Opera', 1.0], ['Others', 1.4]];
复制代码

建立布局

  • d3.pie() 构造一个新的饼布局

构建一个饼布局并接收数据

var pie = d3.pie()
            .sort(null) // 在创建布局的时候,默认排序数据从大到小,设为null可以按照数组默认顺序排序
            .value(function(d){
              return d[1]
            });
复制代码

把数据转换为饼图绘制所需要的数据

var piedata = pie(dataset);
console.log(piedata);
复制代码

在控制台输出piedata,看看转换后的数据

可以看到,原来的数据已经被转换成6组适合画图的数据

  • data —— 保留原有数据
  • index —— 序号
  • startAngle —— 一段弧的起始角度
  • endAngle —— 一段弧的终止角度

生成弧生成器

虽然有了角度,但目前还是很难画出我们想要的饼图,还要用到D3中的路径生成器。在svg中,path标签的路径数值往往十分复杂,手动去生成是不现实的,尤其是要生成各种复杂曲线的时候,好在D3提供了基本的路径生成器,有线段、区域、弧生成器等。画饼图的时候需要用到弧生成器,帮助我们把转换后的数据真正绘制出来

  • d3.arc() 创建一个新的弧生成器
  • arc.innerRadius([radius]) 设置内部半径
  • arc.outerRadius([radius]) 设置外部半径

这里把画布的四分之一作为外部半径,内部半径设为0就是饼图,没错,设置大于0就是圆环图

var outerRadius = width / 4;
var innerRadius = 0;
var arc = d3.arc()
            .outerRadius(outerRadius)
            .innerRadius(innerRadius);
复制代码

绘制饼图

跟之前一样,创建g组合标签后,把piedata数据绑定至g标签,这里要用到D3的内置颜色,d3.schemeCategory10选了10种颜色,方便我们随时使用,为饼图的不同区域填色,不必为想不出好的颜色搭配而烦恼,当然也可以自定义颜色

var arcs = svg.selectAll('g')
              .data(piedata)
              .enter()
              .append('g')
              .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
// 调用内置颜色序列
var colors = d3.schemeCategory10;
arcs.append('path')
    .attr('fill', function(d, i){
      return colors[i];
    })
    .attr('d', function(d){
      return arc(d);
    });
复制代码

在path标签中,给d属性赋予数据经过弧生成器处理的值,这样一个没有标注的饼图就完成了

添加标注

  • arc.centroid(arguments…) 获取弧中心坐标

接下来给饼图加一些标注,以便更好地阅读图形,主要用到弧中心的概念,如下图,黑点就是每个弧的中心,利用**arc.centroid()**可以获取弧中心的坐标,并且这个坐标是相对圆形的相对坐标。有了这个坐标,可以很方便地在每个弧上添加文字标注

arc.centroid(d)是一个包含横坐标和纵坐标的数组[x, y],给坐标乘以2倍以上的数值就把文字移到圆形外边

arcs.append('text')
    .attr('transform', function(d, i){
      var x = arc.centroid(d)[0] * 2.8;
      var y = arc.centroid(d)[1] * 2.8;
      return 'translate(' + x + ', ' + y + ')';
    })
    .attr('text-anchor', 'middle')
    .text(function(d){
      var percent = Number(d.value) / d3.sum(dataset, function(d){
        return d[1];
      }) * 100;
      return d.data[0] + ' ' + percent.toFixed(1) + '%';
    })
复制代码

最后再加一些连线

arcs.append('line')
    .attr('stroke', 'black')
    .attr('x1', function(d){ return arc.centroid(d)[0] * 2; })
    .attr('y1', function(d){ return arc.centroid(d)[1] * 2; })
    .attr('x2', function(d, i){
      return arc.centroid(d)[0] * 2.5;
    })
    .attr('y2', function(d, i){
      return arc.centroid(d)[1] * 2.5;
    });
复制代码

由于最后几个数据太小,标注文字会重叠到一起,这里做了一个判断处理来错开数据值较小的文字,最后的效果图如下所示

查看完整示例代码

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改