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 ...
随机推荐
- 一道C++练习题,替换一个字符串里所有实例
做了一道C++练习题,替换一个字符串里面的所有实例. #include <iostream> #include <string> using namespace std; co ...
- RocEDU.阅读.写作《苏菲的世界》书摘
我们在成长的过程当中,似乎失去了对这世界的好奇心.也正因此,我们丧失了某种极为重要的能力(这也是一种哲学家们想要使人们恢复的能力).因为,在我们内心的某处,有某个声音告诉我们:生命是一种很庞大的.神秘 ...
- win7打开ftp步骤
FTP是很方便文件传输的功能 打开ftp xftp连接 传输测试 如果连接不通的话,有可能是防火墙的问题
- RabbitMQ入门(6)——远程过程调用(RPC)
在RabbitMQ入门(2)--工作队列中,我们学习了如何使用工作队列处理在多个工作者之间分配耗时任务.如果我们需要运行远程主机上的某个方法并等待结果怎么办呢?这种模式就是常说的远程过程调用(Remo ...
- LA 3720 高速公路(互质判斜率)
https://vjudge.net/problem/UVALive-3720 题意: 有一个n行m列的点阵,问一共有多少条非水平非垂直的直线至少穿过其中的两个点. 思路: 没思路的题. 首先枚举矩形 ...
- 在ajax请求下的缓存机制
1.在服务端加 header(“Cache-Control: no-cache, must-revalidate”);2.在ajax发送请求前加上 anyAjaxObj.setRequestHeade ...
- git开发错分支
1,代码未提交时: 使用以下命令即可解决. git add . (把所有改动暂存) git stash (把暂存的文件提交到git的暂存栈) git checkout 本该提交代码的 ...
- Jquery移动html到另一个标签下
需求再现 <div id="div1"> <p>这是一段测试文本001</p> </div> <div id="di ...
- JVM与垃圾回收机制(GC)和类的生命周期
JVM运行时数据区 GC(垃圾回收机制) 什么是垃圾回收机制: 在系统运行过程中,会产生一些无用的对象,这些对象占据着一定的内存,如果不对这些对象清理回收无用的是对象,可能会导致内存的耗尽,所以垃圾回 ...
- Sorl初始
Sorl是什么 ? Solr是Apache下的一个开源项目,使用Java基于Lucene开发的全文检索服务:是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口.用户可 ...