前言
好一段时间没有发表文章了, 虽然也有不断的在写东西, 总是认为产出更偏向于笔记, 似乎并不值得分享与发表.
但知识这种东西仿佛只有表达出来才知道其对与错. 同样, 在表达的过程中也能以一个认真负责的态度来让自己了解的更多.
也许...
让更多的人与我对某件事物的了解达成共识, 就是所谓知识的传递吧.
然而, 错误的认知在传递中总会遇到很多的阻碍的, 而那也就是进步的空间.
我认识到, 写东西的意义就在于此...
D3: Data-Driven Documents
d3js 是一个可以基于数据来操作文档的 JavaScript 库. 可以帮助你使用 HTML, CSS SVG 以及 Canvas 来展示数据. D3 遵循现有的 Web 标准, 可以不需要其他任何框架独立运行在现代浏览器中, 它结合强大的可视化组件来驱动 DOM 操作.
D3.js 可以做什么?
应该有非常多的同学使用 D3 是为了做数据可视化. 即常见的统计图, 报表等. 当然还有不常见的(不常见到看都看不懂的那种...)
数据可视化是什么?
假如我们把股票中的这种那种的图表都去掉, 全部用数字来代替, 正常来说, 绝大部分人是一脸懵逼的, 完全无法简单的分辨出走势的关系.
而正是有了数据可视化的帮助, 我们(他们)在分析数据时才会事半功倍 !
总之呢, 在当下这种大数据量产出的环境下, 作为重中之重的数据的可视化工作亦是非常有意义的.
cdn 引入
<script src="https://d3js.org/d3.v5.min.js"></script>
d3 基础: 元素选择 & 数据绑定
元素选择的方式有两种:
- d3.select(selector)
- d3.selectAll(selector)
selector 与 document.querySelector() 一致
两个函数都返回一个元素选择集合, 并且该集合同样支持链式调用元素选择函数.
d3.select('body').select('div').selectAll('span');
数据绑定的方式也有两种:
- datum(单个数据): 依次绑定
一个数据源到选择的元素集 - data(数组|类数组): 依次绑定
一组数据源到选择的元素集
用法及效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>data&datum</title>
</head>
<body>
<ul id="datum">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul id="data">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script src="../../source/d3.js"></script>
<script>
let str = 'bei';
let datumLis = d3.select('#datum').selectAll('li');
datumLis.datum(str);
datumLis.text((item, idx) => `${idx}: ${item}`);
let dataLis = d3.select('#data').selectAll('li');
dataLis.data(str);
dataLis.text((item, idx) => `${idx}: ${item}`);
</script>
</body>
</html>
输出
0: bei
1: bei
2: bei
3: bei
4: bei
0: b
1: e
2: i
3: undefined
4: undefined
通过观察, d3.data()/datum() 同样会返回一个 Selection 对象, 也就是选择集对象.
该对象包含有两个属性:
- _groups: 匹配命中的所有节点
0: NodeList(5) 0: li __data__: "b" 1: li 2: li 3: li 4: li length: 5 __proto__: NodeList length: 1 __proto__: Array(0) - _parents: 父节点信息
0: ul#data length: 1 __proto__: Array(0)
可以看到, Selection._groups[0][0].__data__ = 'b'. 成功绑定的元素会在其节点上添加(真的添加到 DOM 上了) __data__ 字段, 表示已经成功绑定.
然而这个绑定并不是双向的, 我在浏览器修改了 __data__ 字段的值之后, 页面并没有任何响应.
作为一个先接触 MVVM 的玩家来说, 这种绑定给我一种 物理绑定 的感觉.
来说一下上面 demo 的关键代码:
dataLis.data(str);
data(类数组) 函数用于绑定一个数组或类数组. 比如说 data([1,2,3,4,5]), 那么会将 Selection._group[0] 的每个元素的 __data__ 一次给上数组的对应值. 假如是一个类数组 data('0X032'), 那么会将 '0X032' 作为 ['0','X','0','3','2'] 处理.
直接传递一个 number 给 data 是不行的哦, data(0X032) 无效.
dataLis.text((item, idx) => `${idx}: ${item}`);
这个的话, 大家应该很好懂, text() 方法接收一个回调, 并且 text() 方法的内部有一个 迭代或者循环体, 他会负责调用回调函数, 并且将每次的迭代对象和索引传递给回调函数.
迭代对象就是 Selection._group[0] 所对应的每个元素的 __data__.
索引就是 Selection._group[0] 所对应的每个元素的 索引.
