d3.js中冷門卻實(shí)用的內(nèi)置函數(shù)總結(jié)
前言
其實(shí)在d3.js的API文檔中,提供了很多內(nèi)置的函數(shù),但是有些很有用的內(nèi)置函數(shù)卻被無情的忽略了,這篇博客就來整理整理這些被遺忘卻很實(shí)用的函數(shù)。希望整理過后,他們不再被遺忘。
selection.classed(name,【value】)
value參數(shù)可選,如果沒有指定,則返回與name參數(shù)匹配的第一個非空元素是否綁定了指定的CSS類,true表示綁定,false表示未綁定。如果value指定了的話,就是為selection添加/刪除CSS類。
這點(diǎn)與selection.attr(name,【value】)非常類似,但是相比而言,就冷門的多,恐怕沒有多少人不知道selection.attr(name,【value】),但是有很多人真的不知道selection.classed(name,【value】) 。
這個函數(shù)很實(shí)用,比如鼠標(biāo)進(jìn)入某些點(diǎn),讓這些點(diǎn)高亮以表示強(qiáng)調(diào),但是移出去之后,讓他們回復(fù)原來的樣式就可以用這個函數(shù),免去了重新設(shè)置樣式的麻煩,甚至有時候恢復(fù)原來樣式的時候,還需要判斷,就更麻煩了。
transition.filter(selector)
過濾也有過渡,這點(diǎn)可能很多人都忽略了,比如設(shè)置動畫結(jié)束時,索引為奇數(shù)的元素旋轉(zhuǎn)30度。甚至可以自己定義規(guī)則,如第5、10、15個元素改變,其他的不變。
d3.interpolate(a,b)
返回一個介于a,b之間的默認(rèn)插值器,插值器的類型取決于b的類型。
1)如果b是顏色類型,那么返回的是interpolateRgb插值器
2)如果是字符串類型,則返回interpolateString插值器
3)如果是數(shù)組類型,則返回interpolateArray插值器
4)如果是對象類型,且不能強(qiáng)制轉(zhuǎn)換成字符串類型,則返回interpolateObject插值器
5)否則,返回interpolateNumber插值器
數(shù)組相關(guān)API
使用d3時,會有大量的數(shù)組操作,如果能合理運(yùn)用d3提供的數(shù)組相關(guān)的函數(shù),將會使得工作效率大大提高。
d3.ascending(a,b)
如果a\b,返回1,如果a=b,返回0.
在可視化元素需要有序的時候,這個函數(shù)很有用,可以幫助我們排好序。
d3.min(),d3.max(),d3.extent()
前兩個函數(shù)知道的人應(yīng)該不少,但是最后一個卻相對冷門,它可以直接返回數(shù)組自然排序的最小值和最大值,省的同時調(diào)用前面兩個函數(shù)了。
d3.sum(),d3.mean(),d3.median(),d3.quantile()
基本的求和、平均數(shù)、中位數(shù)、p分位數(shù),都幫你實(shí)現(xiàn)好了,之前還傻乎乎的自己去實(shí)現(xiàn)了,雖然不難,但是代碼會很難看。
d3.shuffle(array)
用Fisher-Yates shuffle算法把傳入的數(shù)組隨機(jī)排序。這樣想得到亂序的時候會不會比較高大上呢?嘿嘿。
d3.keys(object),d3.values(object)
keys返回一個包含指定對象(關(guān)聯(lián)數(shù)組)中所有屬性名稱的數(shù)組。這點(diǎn)很有用,比如用d3.csv()讀文件的時候,想要濾掉一些無關(guān)的dimension,比如id等等,用這個函數(shù)就很有用。
d3.map(),d3.set()
映射與集合是很常見的數(shù)據(jù)結(jié)構(gòu),但是不是所有js版本中都有默認(rèn)的實(shí)現(xiàn)的,但是d3提供了。昨天在做項(xiàng)目的時候就遇到了這個問題,最后是借用了d3提供的map與set解決了。
d3.merge(arrays)
合并指定參數(shù)arrays為一個數(shù)組,與內(nèi)置的concat類似,不過處理二維數(shù)組的時候,它會更方便。
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)
轉(zhuǎn)置二維矩陣用的。
brush
作為一個可視化系統(tǒng),怎么能沒有brush!實(shí)現(xiàn)brush的功能非常簡單,構(gòu)造刷子之前,需要制定x/y比例尺和空的范圍。繪制的刷子可以重新調(diào)整大小和位置。
時間的計數(shù)
d3.time.dayOfYear(date) 返回參數(shù)date是一年里的第幾天,1月1日是第0天。
weekOfYear….等等函數(shù)也是有的,需要用的時候可以查查API,省的寫閏年的判斷,嘿嘿。
布局
Stack(layers【,index】) ,讓我記憶最深,之前做一個項(xiàng)目的時候,就不知道有這東西存在,愣是自己實(shí)現(xiàn)了一遍,麻煩不說,對不對可能還一定.
地理
地理的API這塊我很陌生,沒有什么機(jī)會做這方面的項(xiàng)目,所以用的很少,后面有機(jī)會再來補(bǔ)充.
幾何
同樣陌生的還有幾何這部分的內(nèi)容,比如四叉樹/凸包/多邊形/泰森多邊形,記住這部分有就可以了,后面用過之后再來補(bǔ)充.
行為
由zoom和drag兩部分組成,很重要卻很簡單的內(nèi)容,希望好好掌握。
好了,以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。
- JavaScript可視化圖表庫D3.js API中文參考
- D3.js中data(), enter() 和 exit()的問題詳解
- D3.js實(shí)現(xiàn)折線圖的方法詳解
- D3.js 從P元素的創(chuàng)建開始(顯示可加載數(shù)據(jù))
- D3.js實(shí)現(xiàn)柱狀圖的方法詳解
- 基于d3.js實(shí)現(xiàn)實(shí)時刷新的折線圖
- D3.js實(shí)現(xiàn)餅狀圖的方法詳解
- d3.js實(shí)現(xiàn)簡單的網(wǎng)絡(luò)拓?fù)鋱D實(shí)例代碼
- D3.js實(shí)現(xiàn)雷達(dá)圖的方法詳解
- D3.js實(shí)現(xiàn)文本的換行詳解
相關(guān)文章
基于JS實(shí)現(xiàn)bookstore靜態(tài)頁面的實(shí)例代碼
本文給大家分享一段核心代碼基于js實(shí)現(xiàn)的bookstore靜態(tài)頁面,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友參考下2017-02-02
JavaScript中fromCharCode 和 fromCodePoint 的詳解與應(yīng)
本文將詳細(xì)介紹 JavaScript 中的 String.fromCharCode 和 String.fromCodePoint 方法,這兩個方法能夠幫助開發(fā)者高效地處理字符與編碼之間的轉(zhuǎn)換,理解它們的區(qū)別與應(yīng)用,將讓你的代碼更加靈活和高效,感興趣的朋友跟隨小編一起看看吧2024-12-12
Javascript 獲取鼠標(biāo)當(dāng)前的位置實(shí)現(xiàn)方法
這篇文章主要介紹了Javascript 獲取鼠標(biāo)當(dāng)前的位置實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2016-10-10
微信小程序多文件上傳 Tdesign及導(dǎo)入失敗問題
小程序文件上傳還是有點(diǎn)麻煩的,其實(shí)主要還是小程序?qū)Φ慕涌谟兄T多的不便,比如說,文件不能批量提交,只能一個個的提交,小程序的上傳需要專門的接口,這篇文章主要介紹了微信小程序多文件上傳 Tdesign及導(dǎo)入失敗問題,需要的朋友可以參考下2023-11-11
Javascript實(shí)現(xiàn)圖片加載從模糊到清晰顯示的方法
這篇文章主要介紹了使用Javascript實(shí)現(xiàn)圖片加載從模糊到清晰顯示的方法,通俗易懂,需要的朋友可以參考下。2016-06-06
JS實(shí)現(xiàn)數(shù)組/對象數(shù)組刪除其中某一項(xiàng)
這篇文章主要介紹了JS實(shí)現(xiàn)數(shù)組/對象數(shù)組刪除其中某一項(xiàng),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09
JavaScript常用數(shù)組元素搜索或過濾的四種方法詳解
這篇文章主要介紹了JavaScript常用數(shù)組元素搜索或過濾的四種方法,每種方式通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08

