D3.js学习中总结的那些金句

Posted 2022-12-08 wan353694124

D3.js学习笔记

1、D3.js是数据驱动去创建dom的；

2、D3.js在生成图表的过程中，有很大一部分工作都在处理即将展示的数据，对dom的操作非常少；

3、D3.js绘图三部曲：准备数据、创建dom、设置属性

4、Data-Driven Documents 数据驱动！数据驱动！数据驱动

5、D3.js的某些API有着和jqueryAPI类似功能，简化了javascript

6、D3.js的选择器简直神了，可以选择空集

7、D3.js中的someDom.call（foo）函数，相当于把选择的元素someDom作为foo的参数进行调用，即相当于执行了：foo(someDom);

8、D3.js的动画效果由四大将军来实现：transition()、duration()、ease()和delay()，将这四大将军夹在 动画的初始状态和结束状态之间即可；

9、D3.js中，enter()选取缺少的dom，通常用append()来补；exit()选取多余的dom，通常用remove()来删

10、D3.js中的layout函数是用来将待可视化的数据转换成要生成的图形所需要的数据格式；

11、D3.js中cluster和tree的区别仅仅在于：在节点位置的安排上，cluster让叶子节点对齐；tree让处于同一层级的节点对齐；

12、D3.js中data()函数和datum()函数的区别的神解释：要将一个数组的各项分别绑定到各元素上，假设要绑定的数组为[3,6,9]，那么我们希望第一个p元素绑定3，第二个绑定6，第三个绑定9。这种情况就需要使用data()函数，如果使用datum()，则会将数组本身绑定到各元素上，即第一个p元素绑定[3,6,9]，第二个绑定[3,6,9]，第三个也是绑定[3,6,9]，其区别如图所示：

13、D3.js中文本换行用tspan来完成，每个tspan元素可显示一行；因此一般先用split函数来将要换行的文本转换成按行分开的字符串数组，然后，将split返回的数组绑定到tspan上即可

14、大概接触了D3.js 第9天，中间也间歇过一两天，之前有用过echarts,此时，最大的感受就是，D3.js 比起echarts自由很多。