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 相关文章推荐
js表格分页实现代码
Sep 18 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
小程序实现列表倒计时功能
Jan 29 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
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
PHP生成UTF8文件的方法
2010/05/15 PHP
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
javascript实现的listview效果
2007/04/28 Javascript
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
Python3中的2to3转换工具使用示例
2015/06/12 Python
Python实现多并发访问网站功能示例
2017/06/19 Python
使用tensorflow实现AlexNet
2017/11/20 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
python爬虫中多线程的使用详解
2019/09/23 Python
python 实现矩阵按对角线打印
2019/11/29 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
中层干部岗位职责
2013/12/18 职场文书
南湾猴岛导游词
2015/02/09 职场文书
敬老院义诊活动总结
2015/05/07 职场文书