首页 > Web开发 > 详细

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

时间:2018-11-25 00:44:06      阅读:247      评论:0      收藏:0      [点我收藏+]

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

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

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

但是,操作是这样的:

技术分享图片

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

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

技术分享图片

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

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

技术分享图片

技术分享图片

页面最终输出:

技术分享图片

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

技术分享图片

技术分享图片

页面最终:

技术分享图片

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

原文:https://www.cnblogs.com/eco-just/p/10014266.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!