使用D3.js制作图表详解


Posted in Javascript onAugust 13, 2017

D3是用于数据可视化的Javascript库。使用SVG,Canvas和HTML。结合强大的可视化技术和数据驱动的DOM操作方法。

D3与JQuery的区别 D3是数据驱动的,JQuery不是:我们使用JQuery直接操纵元素;但是使用D3
时我们需要通过D3专有的data(),enter()和exit()方法提供数据和回调,然后D3操作元素。 D3通常用于数据可视化;JQuery用于创建Web应用。D3有很多数据可视化扩展;JQuery有很多Web应用插件。两者都是Javascript DOM操作库,提供CSS选择器和流畅的API。

What is the difference between D3 and JQuery?

最常用的方法

d3.select(selector):选择第一个匹配selector的元素。如果没有匹配的元素,返回一个空的选择(但不是null或undefined)。

d3.selectAll(selector):与select()不同的是,会选择所有匹配的元素。

selection.append(type):如果指定的type是一个字符串,则将这个type(标签名称)作为新元素附加到每个选定元素的最后一个子元素。

selection.attr(name, [value]):value确定时,将selection中名为name的属性值设置成value。value可以为常量或者方法。如果value没有给出,返回selection中第一个非空元素的name属性当前值。

selection.data([data[,key]]):将数据和元素绑定起来,并返回一个新的selection。

selection.enter():返回enter selection。此时DOM元素少于对应的数据。用于添加缺少的DOM元素。比如:

var div = d3.select("body")
  .selectAll("div")
  .data([4, 8, 15, 16, 23, 42])
  .enter().append("div")
  .text(function(d) { return d; });

如果body是空的,上面的代码就会根据数据创建新的div元素,然后添加到body元素中,并将文本内容设置为对应的数字。页面结果如下:

<div>4</div>
 <div>8</div>
 <div>15</div>
 <div>16</div>
 <div>23</div>
 <div>42</div>

selection.exit():返回exit selection。此时DOM元素多于对应的数据。用于移除多余的DOM元素。比如,基于上面的例子,我们要更新数据:

div = div.data([1, 2, 4, 8, 16, 32], function(d) { return d; });

因为此时指定了key方法(用于指定数据和元素匹配的顺序等),并且数据[4,8,16]匹配已经存在的元素,所以update selection只包含3个div元素。我们可以使用enter selection添加3个新元素:

div.enter().append("div").text(function(d) { return d; });

然后,还需要移除不需要的元素[15, 23, 42]:

div.exit().remove();

页面结果:

<div>1</div>
 <div>2</div>
 <div>4</div>
 <div>8</div>
 <div>16</div>
 <div>32</div>

制作柱状图

使用D3.js制作图表详解

柱状图示例

使用D3的时候,要对SVG的结构有一个了解。要绘出什么图形,需要用到什么标签,标签需要定义什么属性。
比如,制作一个柱状图,主要是XY坐标轴和柱形。XY轴用到line标签绘制直线,以及text标签显示刻度的文字。柱形用到rect标签绘制长方形,那如果要带圆角的长方形,我们可以设置rect标签的rx或ry属性,如果要定义长方形的位置,需要设置x和y属性等。就这样,一部分一部分的组合到一起成为一张图。

以下的内容是基于D3 3.x 的API,有些接口跟D3 4.0是不同的。
D3 3.x API Reference
D3 4.0 API Reference

根部的svg

D3绘图首先要创建一个svg元素并定义宽高等属性:

var svg = d3.select(id).append("svg")
  .attr('class', 'svg_timeline')
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom);

坐标轴
制作坐标轴首先需要用到D3的比例尺。用到方法 axis.scale([scale]) ,设置坐标轴的比例尺,或者返回当前的比例尺。比例尺分为:

定量比例尺:连续的数据,比如数字。时间比例尺:数据是时间。序数比例尺:离散的数据,比如名称,类别等。

比如我们要制作一个有时间刻度的X轴和一个数字刻度的Y轴,就可以使用时间比例尺和定量比例尺,或者更具体的说,线性比例尺。

d3.scale.linear():创建一个线性比例尺。 d3.time.scale():创建一个时间比例尺。刻度和刻度格式配置为本地时间。

确定比例尺之后还需要设置输入域和输出范围。比如一个x轴的比例尺为:

var x = d3.time.scale()
  .range([0, 坐标轴的宽度])
  .domain(最小日期, 最大日期);

最小日期和最大日期都是Date对象。然后设置X坐标轴的比例尺并创建它:

//生成x坐标轴
var xAxis = d3.svg.axis()    //新建一个默认的坐标轴
  .scale(x)    //设置比例尺
  .ticks(d3.time.day, 1)   //指定刻度生成的方式
  .tickFormat(function(d){  //自定义刻度文字格式
    var month = d.getMonth() + 1;
    return month+'月'+ d.getDate() +'日';
  })
  .tickPadding([15]) //坐标轴线与文字之间的距离
  .tickSize(-height)
  .orient("bottom"); //位置

ticks的参数类型取决于对应的比例尺的类型,这里传的参数是时间间隔,也就是说刻度与刻度之间是相隔一天的。
tickFormat则让我们可以自定义刻度的文字格式。

值得一说的是,如果数据中对应X轴的数据是字符串,比如‘2017-08-12'。那绑定到页面上的数据是需要被处理的。D3提供解析日期的接口以及日期格式化的接口。

format.parse(string):把一个字符串string解析为一个日期。 d3.time.format(specifier):根据给定的specifier创建一个当地时间格式化。

比如:

var parseDate = d3.time.format("%Y-%m-%d").parse; //时间解析器
var date = parseDate('2017-08-12'); //将字符串解析成日期

最后,在svg元素中添加坐标轴:

//添加X轴元素
svg.append("g")
  .attr("class", "axis x")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

selection.call(function[, arguments…])方法调用指定的方法一次,并把selection跟随参数一起传递到方法中。

柱状图中的长方形
具体步骤:将数据跟页面元素绑定,并创建所需要的页面元素,具体设置每个页面元素的样式位置,以及事件监听等。

//添加条形的元素
var bars = svg.selectAll(".barRect")
  .data(ddata)  //绑定数据
  .enter().append("g")  //创建缺少的页面元素
  .attr('class', 'barRect')
  .attr("id", function(d, i) {
    return "barRect-" + i;
  });          

//定义矩形的位置
//x为矩形最左端的位置
//y为矩形最顶端的位置
bars.append("rect")
  .attr('class','bar-rect')
  .attr("width",16)  //长方形的宽度
  .attr("y", function(d) {
    return y(d.value);   //使用比例尺确定坐标Y值
  })
  .attr("x", function(d) {
    return x(d.date) - 8;  //使用比例尺确定坐标X值
  })
  .attr("height", function(d) {  //条形的高度
    return height - y(d.value);
  })
  .attr('rx',10) //圆角
  .attr('ry',10) //圆角
  .attr('fill','url(#linear-gradient)'); //填充渐变色
Javascript 相关文章推荐
爆炸式的JS圆形浮动菜单特效代码
Mar 03 Javascript
JS数组的常见用法实例
Feb 10 Javascript
javascript属性访问表达式用法分析
Apr 25 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
Json解析的方法小结
Jun 22 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
js精确的加减乘除实例
Nov 14 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
细说webpack6 Babel的使用详解
Sep 26 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
Node.js Domain 模块实例详解
Mar 18 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 #Javascript
react开发教程之React 组件之间的通信方式
Aug 12 #Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 #Javascript
浅谈关于angularJs中使用$.ajax的注意点
Aug 12 #Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 #Javascript
js模块加载方式浅析
Aug 12 #Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 #Javascript
You might like
php 随机生成10位字符代码
2009/03/26 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
codeigniter框架批量插入数据
2014/01/09 PHP
laravel请求参数校验方法
2019/10/10 PHP
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
django 解决manage.py migrate无效的问题
2018/05/27 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
python多维数组分位数的求取方式
2020/03/03 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
Linux的文件类型
2016/07/05 面试题
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
逃课检讨书
2015/01/26 职场文书
听证通知书
2015/04/24 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis