Data-Join
将数据与图元进行绑定
- 使用Data-Join可以省去大量数据设置图元的代码量
- 对于动态变化的数据提供统一接口
用函数设置图元属性
- selection.attr('attributeName', 'value')
- selection.attr('attributeName', (d, i) => {}) d为绑定给图元的数据，i为图元的索引
数据与图元的绑定
- data(dataArray)
- dataArray在保证是一个数组的前提下可以是任何形式
Key
- data(data， keyFun)
- selection.data(data, d => d.name)
Enter Update Exit
- d3.js 绑定数据的三个状态
- Update 图元和数据数目相同
- Enter 数据的条目对于图元甚至没有图元，常用于第一次绑定数据
- Exit 数据的条目少于图元甚至没有数据，常用与结束可视化
Enter
- 有数据没图元，根据新增数据生成相应的图元
- 生成图元的占位，占位的内容需要编程者自行添加append
- const p = maingroup.selectAll('.class').data(data).enter().append('').attr(...)
- enter本质上生成指向父节点的指针，append操作相当于在父节点后添加指针数量的图元并将其与多数的数据绑定
Update
- 有图元有数据
-
const p = maingroup.selectAll('.data curve').data(data).attr(...)
动画
.transition().duration()
Exit
- .exit()返回给你数据已经不存在的图元
-
const p = maingroup.selectAll('.class').data(data).exit().remove()
数据
数据的读取
- data.csv('path/to/data.csv').then(data => {...})
- .csv函数的返回值是一个JS的Promise对象（用于执行异步操作）
- d3.csv(...)会正常向服务器请求数据，在请求并处理好后，将结果扔给.then(...)中的回调函数
数据的处理
- 数字 d = +(d)
- 日期
- 排序
-
data = data.sort((a, b) => { return new Date(a) - new Date(b) })
