在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. wix toolset 用wixui 默认中文

    light.exe .\test.wixobj -ext WixUIExtension -ext WixUtilExtension -cultures:zh-CN

  2. Java中private、protected、public和default的区别-001

    public: 具有最大的访问权限,可以访问任何一个在classpath下的类.接口.异常等.它往往用于对外的情况,也就是对象或类对外的一种接口的形式. protected: 主要的作用就是用来保护子 ...

  3. 【前端】Flex 布局教程:语法篇 [转]

    网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...

  4. Linux系统巡检项目

    系统检测 1.检查系统类型 2.检查发行版本 3.检查内核版本 4.检查主机名称 5.检查是否启用SElinux 6.检测默认的语言/编码 7.检测uptime 8.检测最后启动时间等 CPU检查 1 ...

  5. mysql类似递归的一种操作进行层级查询

    select device_id,device_type,COUNT(1) count from ( select t1.device_id,t1.device_type,DATE_SUB(t1.re ...

  6. Spring Boot 上传图片文件

    步骤一:基于前面springboot入门小demo 基于的springboot入门小demo,已包含了前面文章的知识点(比如:热部署.全局异常处理器). 步骤二:创建uploadPage.jsp上传页 ...

  7. Django Nginx配置

    1.安装uwsgi.flup.djangowget http://www.saddi.com/software/flup/dist/flup-1.0.2.tar.gz 2.项目创建和配置2.1.创建项 ...

  8. 第十一篇:Spark SQL 源码分析之 External DataSource外部数据源

    上周Spark1.2刚发布,周末在家没事,把这个特性给了解一下,顺便分析下源码,看一看这个特性是如何设计及实现的. /** Spark SQL源码分析系列文章*/ (Ps: External Data ...

  9. GDPR或使全球域名whois信息被隐藏

    什么是GDPR? GDPR 全称为 General Data Protection Regulation,是欧盟 2016 年 4 月通过的一项通用数据保护条例(或称“一般数据保护法案”),是 199 ...

  10. AVL树 - 学习笔记

    2017-08-29 14:35:55 writer:pprp AVL树就是带有平衡条件的二叉查找树.每个节点的左子树和右子树高度相差最多为1的二叉查找树 空树的高度定为-1 对树的修正称为旋转 对内 ...