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

Posted 2021-01-22 桔子桑

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

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

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

但是，操作是这样的：

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

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

用的时候呢，直接这么用：

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

页面最终输出：

再来试试0个节点，5个数据：

页面最终：