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

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

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

但是,操作是这样的:

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

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

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

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

页面最终输出:

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

页面最终:

d3.js(v5.7)的node与数据匹配(自动匹配扩展函数)的更多相关文章

  1. D3.js V5 教程

    D3.js V5 教程 1.在项目中使用D3.js 2. 选择元素和设置(获取)属性 3. 绑定数据 4. 理解Update.Enter.Exit 与 添加.删除元素 未完待续..........

  2. D3.js v5 Tutorials

    D3.js v5 Tutorials D3.js v5 教程 https://github.com/d3/d3/blob/master/API.md CHANGES https://github.co ...

  3. D3.js加载csv和json数据

    1.加载数据的基本命令 D3提供了方法可以对不同的数据类型进行加载,比如d3.text(), d3.xml(), d3.json(), d3.csv(), 和d3.html(). <!DOCTY ...

  4. 交互式数据可视化-D3.js(二)选择集和数据

    选择集 select和selectAll类似jquery: d3.select('body') d3.select('.body') d3.select('#body') d3.selectAll(' ...

  5. 【 D3.js 入门系列 — 2 】 绑定数据和选择元素

    1. 如何绑定数据 D3 有一个很独特的功能:能将数据绑定到 DOM 上,也就是绑定到文档上.这么说可能不好理解,例如网页中有段落元素<p>,我们可以将整数 5 与 <p>绑定 ...

  6. d3.js V5版本在vue里使用 自定义节点图片

    var width = this.$refs.topInfo.offsetWidth; var height = this.$refs.topInfo.offsetHeight; var img_w ...

  7. D3.js学习笔记(三)——创建基于数据的SVG元素

    目标 在这一章,你将会使用D3.js,基于我们的数据来把SVG元素添加到网页中.这一过程包括:把数据绑定到元素上,然后在使用这些元素来可视化我们的数据. 注意:不同于前几章,我们从一个完整的代码开始, ...

  8. 用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛

    前言 本文灵感来源于Mike Bostock 的一个 demo 页面 原 demo 基于 D3.js v3 开发, 笔者将其使用 D3.js v5 进行重写, 并改为使用 ES6 语法. 源码: gi ...

  9. D3.js以及通用JS(JavaScript)读取并解析server端JSON的注意事项

    这个需求事实上挺明白的.可是网上搜出来的教程都乱七八糟,认为实在须要自己总结一下. D3.js眼下已经被广泛使用在数据可视化领域,随着大数据的持续发展,这个框架预计会在今后更加流行(据说其作者Mike ...

随机推荐

  1. 20145328 《Java程序设计》实验三实验报告

    20145328 <Java程序设计>实验三实验报告 实验名称 Java敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 实验步骤 (一)敏捷开发与XP 敏捷开发是一种以人为 ...

  2. Hive-0.13安装

    Hive只需在使用节点安装即可. 1.上传tar包.解压   tar -zxvf apache-hive-0.13.0-bin.tar.gz -C /hadoop/  配置HIVE_HOME环境变量  ...

  3. Spring中Bean生命周期

    Spring中的bean生命周期是一个重要的点,只有理解Bean的生命周期,在开发中会对你理解代码是非常有用的.对于Bean的周期,个人认为可以分为四个阶段.第一阶段:Bean的实例化,在该阶段主要是 ...

  4. python sort dict 总结

    python中的dict是不能排序的,只有对dict的representation进行排序,例如list或者tuple 排序肯定会用到sorted函数,那么我们就来讲一下sorted函数. sorte ...

  5. Java实习二

    链表(java实现) Link.java public class Link{ private Node first; public Link(){ this.first = null; } //判断 ...

  6. base64 原理

    Base64编码之所以称为Base64,是因为其使用64个字符来对任意数据进行编码,同理有Base32.Base16编码.标准Base64编码使用的64个字符为: 这64个字符是各种字符编码(比如AS ...

  7. Flash访问模块FDS用法及常见问题—nRF5 SDK模块系列一

    FDS,全称Flash Data Storage,用来访问芯片内部Flash的.当你需要把数据存储在Flash中,或者读取Flash中的用户数据,或者更新或者删除Flash中的数据,那么FDS模块是你 ...

  8. Java接受键盘输入

    import java.util.Scanner;//方法1 import java.io.BufferedReader;//方法2 import java.io.IOException;//方法3 ...

  9. Windows中使用wget整站下载

    weget wget安装 Windows下载 点击下载   https://eternallybored.org/misc/wget/ 会跳转到wget的下载页,根据自己电脑选择下载的文件,我下载的版 ...

  10. 【转】VIM 中设置Tab

    灵活操作 Vim 中的 Tabsgaleki post @ 2007年11月16日 05:07PM in Vim Tips with tags: vim tabs Vim 支持 Tabs,也就是标签页 ...