d3.js(v5.7)的node与数据匹配(自动匹配扩展函数)
在d3操作时,当然少不了对已有节点绑定数据,那么问题就来了,节点个数和数据长度不一样的,怎么办。
d3在节点少于数据长度的时候,有enter().appen()方法实现node的增加;
在节点大于数据长度的时候,有exit().remove()实现对多余节点的删除;
但是,操作是这样的:

有没有感觉很无奈,难道写的时候还要人为判断节点的个数与数据量之间的关系么?那还要电脑干嘛,还要程序干嘛?
说干就干,于是就封装了一个节点、数据自动匹配的函数-----automatch():

用的时候呢,直接这么用:
首先7个节点,5个数据项


页面最终输出:

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


页面最终:

d3.js(v5.7)的node与数据匹配(自动匹配扩展函数)的更多相关文章
- D3.js V5 教程
D3.js V5 教程 1.在项目中使用D3.js 2. 选择元素和设置(获取)属性 3. 绑定数据 4. 理解Update.Enter.Exit 与 添加.删除元素 未完待续..........
- D3.js v5 Tutorials
D3.js v5 Tutorials D3.js v5 教程 https://github.com/d3/d3/blob/master/API.md CHANGES https://github.co ...
- D3.js加载csv和json数据
1.加载数据的基本命令 D3提供了方法可以对不同的数据类型进行加载,比如d3.text(), d3.xml(), d3.json(), d3.csv(), 和d3.html(). <!DOCTY ...
- 交互式数据可视化-D3.js(二)选择集和数据
选择集 select和selectAll类似jquery: d3.select('body') d3.select('.body') d3.select('#body') d3.selectAll(' ...
- 【 D3.js 入门系列 — 2 】 绑定数据和选择元素
1. 如何绑定数据 D3 有一个很独特的功能:能将数据绑定到 DOM 上,也就是绑定到文档上.这么说可能不好理解,例如网页中有段落元素<p>,我们可以将整数 5 与 <p>绑定 ...
- d3.js V5版本在vue里使用 自定义节点图片
var width = this.$refs.topInfo.offsetWidth; var height = this.$refs.topInfo.offsetHeight; var img_w ...
- D3.js学习笔记(三)——创建基于数据的SVG元素
目标 在这一章,你将会使用D3.js,基于我们的数据来把SVG元素添加到网页中.这一过程包括:把数据绑定到元素上,然后在使用这些元素来可视化我们的数据. 注意:不同于前几章,我们从一个完整的代码开始, ...
- 用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛
前言 本文灵感来源于Mike Bostock 的一个 demo 页面 原 demo 基于 D3.js v3 开发, 笔者将其使用 D3.js v5 进行重写, 并改为使用 ES6 语法. 源码: gi ...
- D3.js以及通用JS(JavaScript)读取并解析server端JSON的注意事项
这个需求事实上挺明白的.可是网上搜出来的教程都乱七八糟,认为实在须要自己总结一下. D3.js眼下已经被广泛使用在数据可视化领域,随着大数据的持续发展,这个框架预计会在今后更加流行(据说其作者Mike ...
随机推荐
- 20145328 《Java程序设计》实验三实验报告
20145328 <Java程序设计>实验三实验报告 实验名称 Java敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 实验步骤 (一)敏捷开发与XP 敏捷开发是一种以人为 ...
- Hive-0.13安装
Hive只需在使用节点安装即可. 1.上传tar包.解压 tar -zxvf apache-hive-0.13.0-bin.tar.gz -C /hadoop/ 配置HIVE_HOME环境变量 ...
- Spring中Bean生命周期
Spring中的bean生命周期是一个重要的点,只有理解Bean的生命周期,在开发中会对你理解代码是非常有用的.对于Bean的周期,个人认为可以分为四个阶段.第一阶段:Bean的实例化,在该阶段主要是 ...
- python sort dict 总结
python中的dict是不能排序的,只有对dict的representation进行排序,例如list或者tuple 排序肯定会用到sorted函数,那么我们就来讲一下sorted函数. sorte ...
- Java实习二
链表(java实现) Link.java public class Link{ private Node first; public Link(){ this.first = null; } //判断 ...
- base64 原理
Base64编码之所以称为Base64,是因为其使用64个字符来对任意数据进行编码,同理有Base32.Base16编码.标准Base64编码使用的64个字符为: 这64个字符是各种字符编码(比如AS ...
- Flash访问模块FDS用法及常见问题—nRF5 SDK模块系列一
FDS,全称Flash Data Storage,用来访问芯片内部Flash的.当你需要把数据存储在Flash中,或者读取Flash中的用户数据,或者更新或者删除Flash中的数据,那么FDS模块是你 ...
- Java接受键盘输入
import java.util.Scanner;//方法1 import java.io.BufferedReader;//方法2 import java.io.IOException;//方法3 ...
- Windows中使用wget整站下载
weget wget安装 Windows下载 点击下载 https://eternallybored.org/misc/wget/ 会跳转到wget的下载页,根据自己电脑选择下载的文件,我下载的版 ...
- 【转】VIM 中设置Tab
灵活操作 Vim 中的 Tabsgaleki post @ 2007年11月16日 05:07PM in Vim Tips with tags: vim tabs Vim 支持 Tabs,也就是标签页 ...