d3.js中冷門卻實用的內置函數(shù)總結
前言
其實在d3.js的API文檔中,提供了很多內置的函數(shù),但是有些很有用的內置函數(shù)卻被無情的忽略了,這篇博客就來整理整理這些被遺忘卻很實用的函數(shù)。希望整理過后,他們不再被遺忘。
selection.classed(name,【value】)
value參數(shù)可選,如果沒有指定,則返回與name參數(shù)匹配的第一個非空元素是否綁定了指定的CSS類,true表示綁定,false表示未綁定。如果value指定了的話,就是為selection添加/刪除CSS類。
這點與selection.attr(name,【value】)
非常類似,但是相比而言,就冷門的多,恐怕沒有多少人不知道selection.attr(name,【value】)
,但是有很多人真的不知道selection.classed(name,【value】)
。
這個函數(shù)很實用,比如鼠標進入某些點,讓這些點高亮以表示強調,但是移出去之后,讓他們回復原來的樣式就可以用這個函數(shù),免去了重新設置樣式的麻煩,甚至有時候恢復原來樣式的時候,還需要判斷,就更麻煩了。
transition.filter(selector)
過濾也有過渡,這點可能很多人都忽略了,比如設置動畫結束時,索引為奇數(shù)的元素旋轉30度。甚至可以自己定義規(guī)則,如第5、10、15個元素改變,其他的不變。
d3.interpolate(a,b)
返回一個介于a,b之間的默認插值器,插值器的類型取決于b的類型。
1)如果b是顏色類型,那么返回的是interpolateRgb插值器
2)如果是字符串類型,則返回interpolateString插值器
3)如果是數(shù)組類型,則返回interpolateArray插值器
4)如果是對象類型,且不能強制轉換成字符串類型,則返回interpolateObject插值器
5)否則,返回interpolateNumber插值器
數(shù)組相關API
使用d3時,會有大量的數(shù)組操作,如果能合理運用d3提供的數(shù)組相關的函數(shù),將會使得工作效率大大提高。
d3.ascending(a,b)
如果a\b,返回1,如果a=b,返回0.
在可視化元素需要有序的時候,這個函數(shù)很有用,可以幫助我們排好序。
d3.min(),d3.max(),d3.extent()
前兩個函數(shù)知道的人應該不少,但是最后一個卻相對冷門,它可以直接返回數(shù)組自然排序的最小值和最大值,省的同時調用前面兩個函數(shù)了。
d3.sum(),d3.mean(),d3.median(),d3.quantile()
基本的求和、平均數(shù)、中位數(shù)、p分位數(shù),都幫你實現(xiàn)好了,之前還傻乎乎的自己去實現(xiàn)了,雖然不難,但是代碼會很難看。
d3.shuffle(array)
用Fisher-Yates shuffle算法把傳入的數(shù)組隨機排序。這樣想得到亂序的時候會不會比較高大上呢?嘿嘿。
d3.keys(object),d3.values(object)
keys返回一個包含指定對象(關聯(lián)數(shù)組)中所有屬性名稱的數(shù)組。這點很有用,比如用d3.csv()
讀文件的時候,想要濾掉一些無關的dimension,比如id等等,用這個函數(shù)就很有用。
d3.map(),d3.set()
映射與集合是很常見的數(shù)據(jù)結構,但是不是所有js版本中都有默認的實現(xiàn)的,但是d3提供了。昨天在做項目的時候就遇到了這個問題,最后是借用了d3提供的map與set解決了。
d3.merge(arrays)
合并指定參數(shù)arrays為一個數(shù)組,與內置的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)
轉置二維矩陣用的。
brush
作為一個可視化系統(tǒng),怎么能沒有brush!實現(xiàn)brush的功能非常簡單,構造刷子之前,需要制定x/y比例尺和空的范圍。繪制的刷子可以重新調整大小和位置。
時間的計數(shù)
d3.time.dayOfYear(date)
返回參數(shù)date是一年里的第幾天,1月1日是第0天。
weekOfYear….等等函數(shù)也是有的,需要用的時候可以查查API,省的寫閏年的判斷,嘿嘿。
布局
Stack(layers【,index】)
,讓我記憶最深,之前做一個項目的時候,就不知道有這東西存在,愣是自己實現(xiàn)了一遍,麻煩不說,對不對可能還一定.
地理
地理的API這塊我很陌生,沒有什么機會做這方面的項目,所以用的很少,后面有機會再來補充.
幾何
同樣陌生的還有幾何這部分的內容,比如四叉樹/凸包/多邊形/泰森多邊形,記住這部分有就可以了,后面用過之后再來補充.
行為
由zoom和drag兩部分組成,很重要卻很簡單的內容,希望好好掌握。
好了,以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。
相關文章
基于jstree使用AJAX請求獲取數(shù)據(jù)形成樹
這篇文章主要為大家詳細介紹了基于jstree使用AJAX請求獲取數(shù)據(jù)形成樹,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-08js實現(xiàn)PC端根據(jù)IP定位當前城市地理位置
本文主要分享了js實現(xiàn)PC端根據(jù)IP定位當前城市地理位置的方法,具有很好的參考價值,下面跟著小編一起來看下吧2017-02-02VSCode Webview中實現(xiàn)點擊下載圖片的基本流程
這篇文章主要介紹了VSCode Webview中如何實現(xiàn)點擊下載圖片,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04Eclipse編輯jsp、js文件時卡死現(xiàn)象的解決辦法匯總
使用Eclipse編輯jsp、js文件時,經常出現(xiàn)卡死現(xiàn)象,在網上百度了N次,經過N次優(yōu)化調整后,卡死現(xiàn)象逐步好轉,下面通過腳本之家平臺給大家分享幾種解決辦法,需要的朋友參考下2016-02-02