使用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 相关文章推荐
JQuery防止退格键网页后退的实现代码
Mar 23 Javascript
javascript读写json示例
Apr 11 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
微信小程序 实战小程序实例
Oct 08 Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
Vue关于组件化开发知识点详解
May 13 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操作数组相关函数
2011/02/03 PHP
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
vue实现购物车的监听
2020/04/20 Javascript
用Python输出一个杨辉三角的例子
2014/06/13 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
历史学专业推荐信
2013/11/06 职场文书
大学活动邀请函
2014/01/28 职场文书
大学生优秀团员事迹材料
2014/01/30 职场文书
期终自我鉴定
2014/02/17 职场文书
职称评定自我鉴定
2014/03/18 职场文书
学生自我评语大全
2014/04/18 职场文书
电子信息专业应届生自荐信
2014/06/04 职场文书
优秀教师个人总结
2015/02/11 职场文书
超市食品安全承诺书
2015/04/29 职场文书
学校推普周活动总结
2015/05/07 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
Linux在两个服务器直接传文件的操作方法
2022/08/05 Servers