d3学习

2019-09-22 by 杜宏伟

d3是一款优秀的数据报表工具,非常强大和灵活

准备

首先下载 v5 版本

集合的概念

如果数组为 [3, 6, 9, 12, 15],将此数组绑定到三个 p 元素的选择集上。可以想象,会有两个数据没有元素与之对应,这时候 D3 会建立两个空的元素与数据对应,这一部分就称为 Enter。而有元素与数据对应的部分称为 Update。如果数组为 [3],则会有两个元素没有数据绑定,那么没有数据绑定的部分被称为 Exit。

举例,比如在页面中有 3个p元素,获取update集合,items就是update集合


d3.selectAll('p')
  .data([3, 6, 9, 12, 15])  

数据多出两个,这两个元素在enter集合,可以用多出来的数据再补充p,位置就是原来最后一个p的后面进行补充

d3.selectAll('p')
  .data([3, 6, 9, 12, 15])
  .enter()      
  .append('p')

eixt是多出来的部分,现在页面中有10个p元素,但是只有5个数据,那么有5个p元素是没有绑数据的,可以用exit获取,接下来一般会删除

d3.selectAll('p')
  .data([3, 6, 9, 12, 15])
  .exit()      
  .remove()

选择元素

  • d3.select():是选择所有指定元素的第一个
  • d3.selectAll():是选择指定元素的全部

绑定数据

  • datum():绑定一个数据到选择集上
  • data():绑定一个数组到选择集上,数组的各项值分别与选择集的各元素绑定

datum用的机率不大,一般用data。

比例尺

常用的比例尺有 scaleLiner,scaleOrdinal,scaleBand,scaleTime等具体用法查文档即可,这里说下 scaleLiner.ticks

ticks值不是说你输入什么都是好使的,ticks的参数实际上都是在2,5和10这三个中选。(实际上还支持0和1,当超过10之后下文再做详说),所以你传入3实际上相当于传入2,传入4相当于传入5,传入6相当于传入5,传入8相当于传入10.也就是说你传入的值,首先和上面这几个备选参数去比较,越接近哪一个,就用哪个作为值。所以当你传入接近10而距离另一个值更远的值时,就会相当于传入10. 传入1.5时取1,传入1.6时取2.

当超过10之后怎么算?传入大于10之后,就以20,50和100来计算,当然,10还是算数的,传入15相当于传入10,但是传入16就相当于传入20.这个规则跟10以内其实差不多。

如果有兴趣可以去看源码,源码核心逻辑其实不多。

其实也没必要知道太详细,如果默认的ticks不满意,可以输入值看效果,直到满意为止,具体什么值其实不是那么重要。只需要知道,d3内部会做处理,不同的tick可能会出现相同的结果。

文本换行

文本换行用 tspan元素,每行用 dy 相对值来设置y 值,相对值是相对于上一个元素的y值

数据格式

推荐用 csv格式,和json相比,纯数据,体积要小得多,而且可以直接用excel编辑,非常方便。

实例

一般推荐用svg画图,简单图形,象rect,可以直接画,复杂图形都是能过 path来画的. d3有生成path的函数,象d3.arc,d3.line 等。这些都是我自己练习的实例,在chrome浏览器中测试通过。

参考

我叫杜宏伟,前端开发。

一直想写博客,在2018的年的最后几天,终于上线了。

对于前端开发,一个特点就是太零散,很容易会了后面忘了前面,所以归纳总结很重要。再有就是分享,做前端好多年,以前都是看你们写的文章, 现在我也开始写一些,希望可以帮到入行的小伙伴。微信号 duhongwei5775

欢迎转载,只需注明作者,出处即可

版权说明:署名 4.0 国际(CC BY 4.0)