使用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 相关文章推荐
基于mootools插件实现遮罩层新手引导
May 24 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 Javascript
jquery为页面增加快捷键示例
Jan 31 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
一个基于react的图片裁剪组件示例
Apr 18 Javascript
微信小程序绘制图片发送朋友圈
Jul 25 Javascript
小程序表单认证布局及验证详解
Jun 19 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
mysql5写入和读出乱码解决
2006/11/25 PHP
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
vuex的简单使用教程
2018/02/02 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
js实现全选反选不选功能代码详解
2019/04/24 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
python如何使用unittest测试接口
2018/04/04 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
python实现简易学生信息管理系统
2020/04/05 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
最新销售员个人自荐信
2013/09/21 职场文书
市场营销专业推荐信
2013/11/03 职场文书
教师绩效考核方案
2014/01/21 职场文书
八一慰问活动方案
2014/02/07 职场文书
大学生作弊检讨书
2014/02/19 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers