分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

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

发布时间:2023-09-06 02:23责任编辑:熊小新关键词:js

在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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved