使用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实现下拉框的动态添加(附效果)
Apr 03 Javascript
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
在微信小程序中保存网络图片
Feb 12 Javascript
详解JavaScript栈内存与堆内存
Apr 04 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 Javascript
如何手写简易的 Vue Router
Oct 10 Javascript
json.stringify()与json.parse()的区别以及用处
Jan 25 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代码
2010/08/08 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
php定时计划任务的实现方法详解
2013/06/06 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
2016/03/06 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
python实现2014火车票查询代码分享
2014/01/10 Python
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
Pandas中resample方法详解
2019/07/02 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
正规的求职信范文分享
2013/12/11 职场文书
海南地接欢迎词
2014/01/14 职场文书
车辆转让协议书
2014/04/15 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python