d3.js中冷门却实用的内置函数总结


Posted in Javascript onFebruary 04, 2017

前言

其实在d3.js的API文档中,提供了很多内置的函数,但是有些很有用的内置函数却被无情的忽略了,这篇博客就来整理整理这些被遗忘却很实用的函数。希望整理过后,他们不再被遗忘。

selection.classed(name,【value】)

value参数可选,如果没有指定,则返回与name参数匹配的第一个非空元素是否绑定了指定的CSS类,true表示绑定,false表示未绑定。如果value指定了的话,就是为selection添加/删除CSS类。

这点与selection.attr(name,【value】)非常类似,但是相比而言,就冷门的多,恐怕没有多少人不知道selection.attr(name,【value】),但是有很多人真的不知道selection.classed(name,【value】) 

这个函数很实用,比如鼠标进入某些点,让这些点高亮以表示强调,但是移出去之后,让他们回复原来的样式就可以用这个函数,免去了重新设置样式的麻烦,甚至有时候恢复原来样式的时候,还需要判断,就更麻烦了。

transition.filter(selector)

过滤也有过渡,这点可能很多人都忽略了,比如设置动画结束时,索引为奇数的元素旋转30度。甚至可以自己定义规则,如第5、10、15个元素改变,其他的不变。

d3.interpolate(a,b)

返回一个介于a,b之间的默认插值器,插值器的类型取决于b的类型。

     1)如果b是颜色类型,那么返回的是interpolateRgb插值器

     2)如果是字符串类型,则返回interpolateString插值器

     3)如果是数组类型,则返回interpolateArray插值器

     4)如果是对象类型,且不能强制转换成字符串类型,则返回interpolateObject插值器

     5)否则,返回interpolateNumber插值器

数组相关API

使用d3时,会有大量的数组操作,如果能合理运用d3提供的数组相关的函数,将会使得工作效率大大提高。

d3.ascending(a,b)

如果a\b,返回1,如果a=b,返回0.

在可视化元素需要有序的时候,这个函数很有用,可以帮助我们排好序。

d3.min(),d3.max(),d3.extent()

前两个函数知道的人应该不少,但是最后一个却相对冷门,它可以直接返回数组自然排序的最小值和最大值,省的同时调用前面两个函数了。

d3.sum(),d3.mean(),d3.median(),d3.quantile()

基本的求和、平均数、中位数、p分位数,都帮你实现好了,之前还傻乎乎的自己去实现了,虽然不难,但是代码会很难看。

d3.shuffle(array)

用Fisher-Yates shuffle算法把传入的数组随机排序。这样想得到乱序的时候会不会比较高大上呢?嘿嘿。

d3.keys(object),d3.values(object)

keys返回一个包含指定对象(关联数组)中所有属性名称的数组。这点很有用,比如用d3.csv()读文件的时候,想要滤掉一些无关的dimension,比如id等等,用这个函数就很有用。

d3.map(),d3.set()

映射与集合是很常见的数据结构,但是不是所有js版本中都有默认的实现的,但是d3提供了。昨天在做项目的时候就遇到了这个问题,最后是借用了d3提供的map与set解决了。

d3.merge(arrays)

合并指定参数arrays为一个数组,与内置的concat类似,不过处理二维数组的时候,它会更方便。

d3.zip(arrays),d3.pairs(arrays)

d3.zip(【1,2】,【3,4,5】)返回【【1,3】,【2,4】】有啥用自己体会。

d3.pairs(【1,2,3,4】)返回【【1,2】,【2,3】,【3,4】】

d3.transpose(matrix)

转置二维矩阵用的。

brush

作为一个可视化系统,怎么能没有brush!实现brush的功能非常简单,构造刷子之前,需要制定x/y比例尺和空的范围。绘制的刷子可以重新调整大小和位置。

时间的计数

d3.time.dayOfYear(date) 返回参数date是一年里的第几天,1月1日是第0天。

weekOfYear….等等函数也是有的,需要用的时候可以查查API,省的写闰年的判断,嘿嘿。

布局

Stack(layers【,index】) ,让我记忆最深,之前做一个项目的时候,就不知道有这东西存在,愣是自己实现了一遍,麻烦不说,对不对可能还一定.

地理

地理的API这块我很陌生,没有什么机会做这方面的项目,所以用的很少,后面有机会再来补充.

几何

同样陌生的还有几何这部分的内容,比如四叉树/凸包/多边形/泰森多边形,记住这部分有就可以了,后面用过之后再来补充.

行为

由zoom和drag两部分组成,很重要却很简单的内容,希望好好掌握。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
javascript中的previousSibling和nextSibling的正确用法
Sep 16 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
基于require.js的使用(实例讲解)
Sep 07 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
微信小程序canvas实现签名功能
Jan 19 Javascript
原生js开发的日历插件
Feb 04 #Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 #Javascript
原生js实现打字动画游戏
Feb 04 #Javascript
js实现自定义路由
Feb 04 #Javascript
jQuery窗口拖动功能的实现代码
Feb 04 #Javascript
简单易懂的天气插件(代码分享)
Feb 04 #Javascript
URL中“#” “?” &“”号的作用浅析
Feb 04 #Javascript
You might like
php防注
2007/01/15 PHP
珊瑚虫IP库浅析
2007/02/15 PHP
逆序二维数组插入一元素的php代码
2012/06/08 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
php实现复制移动文件的方法
2015/07/29 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
js 操作符实例代码
2009/10/24 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
Bootstrap创建可折叠的组件
2016/02/23 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
python利用装饰器进行运算的实例分析
2015/08/04 Python
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
python 6种方法实现单例模式
2020/12/15 Python
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
市场营销专业毕业生自荐信
2013/11/02 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
婚前协议书范本
2014/10/27 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
用人单位聘用意向书
2015/05/11 职场文书
退税申请报告怎么写
2015/05/18 职场文书
行政处罚告知书
2015/07/01 职场文书
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android
python实现简单的三子棋游戏
2022/04/28 Python
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL