这是一篇 D3的入门概述,目的是为了理清对D3的认识,也希望能帮助大家入门。
D3(Data-Driven Document)翻译成中文“数据驱动文档”,是一个基于数据操作 DOM 的Javascript库。理解起来,D3 跟 jQuery 很像,不过D3是面向数据可视化的,数据驱动操作DOM;而 jQuery 是面向 web 开发的,直接操作 DOM。
D3 是 javaScript 库,不是像 Echarts、HighCharts 等各种 charts 那样的 javaScript 图表库,其设计理念是把数据映射到视觉元素(形状、长度、方向、角度、颜色、面积、文本等)并通过视觉元素的组合来进行数据可视化(我自己理解的)。因此,D3 更加灵活,更加适用于创建定制化的交互式数据可视化。阿里的 G2 也借鉴了D3 的这个思想,G2 也是有很大潜力的。
因为,D3 没有引入新的视觉展现形式,它在图形方面的词汇直接来自于 web 标准(HTML、CSS、SVG、Canvas)。所以,无论浏览器怎么迭代更新,D3 都不会过时。业界称 D3 为数据可视化库王者,最强大的数据可视化 js 库。
学习 D3,除了对 D3 API 的学习,web 相关的 HTML、CSS、JavaScript、SVG、Canvas 知识以及数据可视化理论的知识也是需要学习的。当然,你可以边学 D3,边补充这些方面的知识。
引入D3 最简单的方法,通过 html 里的script标签引入外部d3脚本文件。可以使用外部链接,也可以把d3.js下载到本地再引入。
使用外部链接
<script src="https://d3js.org/d3.v5.min.js" />
本地引入
<script src="./d3.v5.min.js" /> //src属性里写d3.js本地路径
d3.min.js 是 d3.js 的压缩版本,文件更小,加载速度更快,但是功能完全没有打折。
如果需要读取外部文件(csv、json 或者 xml),需要搭建一个服务器环境。如果你安装过python3,可以启用其自带的简易服务程序。python -m http.server
一条命令就搞定了。你也可以去Apache官网(httpd.apache.org/)下载安装Apache Http Server。
引入 d3.js 后,就可以获得要使用的 "d3" 对象了。D3 对象类似 jQuery 中的 “$”对象,采用了同样的链式语法。就是说,每次打点调用 d3 提供的函数方法,都会返回一个 d3 对象,这样可以继续调用 d3 的其他函数方法。举个例子:
d3.select('body') .append('svg') .attr('width',500) .attr('height',500) 复制代码
这行代码的意思是:选择 body 标签,添加 svg 元素,设置 svg 元素的宽度和高度为 500。
习惯了这种链式语法,你会发现用这种语法来创建数据可视化非常顺手,一骑绝尘。下面这张图很好的呈现了 D3 对象的组成。
D3 选择元素提供了两个函数:select 和 selectAll。
select 返回css选择器所匹配的第一个元素。
selectAll 返回css选择器匹配的所有元素。
选择元素后可以操作元素,操作元素主要分为增加 ( append )、插入 ( insert )、删除元素 ( remove ) 和设置获取元素属性 ( attr, style )。下面用一个例子展示 D3 选择和操作元素,便于理解,大家可以自己逐行添加运行。
数据绑定是将数据绑定到 DOM 元素上,这是 D3 最大的特色,也是 D3 的设计哲学。D3 中数据绑定提供了 datum() 和data()两个函数。
datum(value) 选择集中的每一个元素绑定相同的数据value。
这个方法不会进行数据绑定的计算(update、enter、exit),只能在现有的元素上绑定数据。如果 value 是数组会自动转成字符串。
data([value]) 选择集中的每一个元素分别绑定数组 value 中的一项。
便于理解,还是用一个例子说明,大家可以自己逐行添加运行。
比例尺是 D3 重要概念。
为什么需要比例尺?
原因在于真实数据与创建数据可视化的视觉元素大小之间存在差异。比例尺这个概念跟地图比例尺的概念是一样的,要一个画布上绘制一幅世界地图,需要按一定的比例将整个世界投射到画布上。从数学意义上来说,比例尺就是数学函数,它有三个要素:定义域、值域、对应法则。D3 根据对应法则的不同,提供了各种比例尺,有连续也有离散的。
以线性比例尺为例:
let scale = d3.scaleLinear() .domain([0,10000]) .range([0,100]) 复制代码
其中 scaleLinear() 对应法则,domain() 是定义域,range() 是值域。
坐标轴是绘制图表经常用到组件,比如柱形图、折线图、散点图、气泡图等。D3 中提供了专门的坐标轴模块 d3-axis,只需要几行代码就可以生成各种各样的坐标轴。一般情况下,坐标轴要与比例尺一起使用。记住这句话,离开比例尺的坐标轴就是耍流氓。
便于理解,还是用一个例子说明。
运行最终结果:
用上述这些知识就可以做很多图了,举个例子,做个柱形图。
这篇文章仅仅是对D3最基本的概念及模块做了简短概述,还有很多模块没有讲到。不过当你理解了数据绑定,会使用选择和操作、比例尺、坐标轴,加上直线、圆圈、矩形等基本图形,已经能够写出无数具有创造力的作品。
关注 数据可视化技术 微信公众号