D3.js(Data-Driven Documents)即被数据驱动的文档,它是一个用于根据数据来操作文档的JavaScript库。相比于echart, antv等其他图表库,它算是一个比较底层的数据可视化工具。它不提供任何一种现成的图表,只做最基础的东西,所有的图表都需要我们在它的库里挑选合适的方法进行构建。在一切即数据的今天,我们更需要做到让数据活起来,展现数据之美。
简介
犹抱琵琶半遮面,千呼万唤中终于要接触数据可视化了。数据可视化越来越流行,让复杂的数据和文字变得十分容易理解。作为其中的佼佼者,当然要先侃一下我们的D3了。
D3.js 是基于数据驱动文档工作方式的一款JavaScript函数库,主要用于网页作图、生成互动图形,是最流行的可视化库之一,它被很多其他的表格插件所使用。D3使你有能力借助HTML,SVG和CSS来生动地可视化各种数据。一句话,D3根据现有的web标准,将强大的可视化,动态交互和数据驱动的DOM操作方法完美结合,进而来制作炫目的可视化效果。
比较一下D3和JQuery
同是操作DOM的,就少不了被拿出来比较一下:
- D3是数据驱动的,JQuery不是:我们使用JQuery选择器$()直接操纵元素;D3通过专有的datum(),data(),enter()和exit()方法提供数据和回调,然后操作元素
- D3用来做数据可视化,jQuery用来创建web应用
使用
在这里下载最新的版本(5.5.0):
直接链接到最新版本:
<script src="https://d3js.org/d3.v5.min.js"></script>
复制代码
NPM:
npm install d3
复制代码
Yarn:
yarn add d3
复制代码
浏览器支持情况
D3支持的主流浏览器不包括IE8及以前的版本。D3在Chrome、Firefox、Safari、Opera和IE9上都能正常使用。D3的大部分组件可以在旧的浏览器运行。
简单示例(实现一个简单的图表)
柱形图简明、醒目,是一种简单常用的图表,主要构成部分有矩形、坐标轴和文字说明。这个例子只绘制矩形的部分。
假设给了我们一组数据,[30, 86, 168, 281, 303, 365],根据图片我们可以直观的看出这些数据的关系
下面就让我们一步一步的去实现它。
选择集
在jQuery中我们使用选择器$()去选择元素,在d3中我们引入一个新的名词叫做选择集。使用 d3.select() 或 d3.selectAll() 选择元素后返回的对象,就是选择集。
- d3.select() - 从当前文档中选择一个元素
- d3.selectAll() - 从当前文档中选择多个元素
- selection.style() - 取得或设置样式属性
D3中我们可以像jQuery一样使用链式语法
d3.select()
.selectAll()
.style('color', 'red');
复制代码
数据绑定
D3中我们可以把数据绑定到DOM上,它可以通过函数来实现:
- selection.datum() - 取得或设置单个元素的数据
- selection.data() - 取得或设置一组元素的数据
以下是一个使用说明:
var dataset = ['Beijing', 'Shanghai', 'Tianjin', 'Chongqing'];
var p = body.selectAll('p');
p.data(dataset)
.text(function(d, i) {
return d;
});
复制代码
这样就把数据绑定到了p标签上,函数function(d, i){}包含两个参数,d代表数据,这里就是与元素绑定的数据;i代表索引,从0开始
画布
要绘图,首先需要的是一块"画布"。HTML5中提供了两种强有力的"画布": SVG和Canvas。这里不多做解释。
D3提供了众多的SVG图形的生成器,我们在SVG画布中实现它。
添加画布如下:
let svg = d3.select('body') //选择文档中的body元素
.append('svg'); //添加一个svg元素
复制代码
绘制矩形
绘制矩形之前我们的SVG元素里面还没有rect元素,我们就需要自己为它添加补全,需要链式使用selection.enter()和selection.append()来实现。
svg.selectAll("rect")
.data(data) // 绑定数据
.enter() // 为缺失的元素返回占位符
.append("rect") // 添加足够数量的矩形元素
.attr("x",20 + 'px') //设置矩形的x轴和y轴位置
.attr("y",function(d,i){
return i * 28 + 'px';
})
.style("width",function(d){ // 设置矩形的宽高
return d + 'px';
})
.style("height",26 + 'px')
.text(function(d) {
return d;
})
复制代码
一个简单的柱形图就成功了,实现效果如下图