d3.js(v5.7)的node与数据匹配(自动匹配扩展函数)

在d3操作时,当然少不了对已有节点绑定数据,那么问题就来了,节点个数和数据长度不一样的,怎么办。

d3在节点少于数据长度的时候,有enter().appen()方法实现node的增加;

在节点大于数据长度的时候,有exit().remove()实现对多余节点的删除;

但是,操作是这样的:

image.png

有没有感觉很无奈,难道写的时候还要人为判断节点的个数与数据量之间的关系么?那还要电脑干嘛,还要程序干嘛?

说干就干,于是就封装了一个节点、数据自动匹配的函数-----automatch():

image.png

用的时候呢,直接这么用:

首先7个节点,5个数据项

image.png

image.png

页面最终输出:

image.png

再来试试0个节点,5个数据:

image.png

image.png

页面最终:

image.png

猜你喜欢

转载自www.cnblogs.com/eco-just/p/10014266.html