您好,登錄后才能下訂單哦!
小編給大家分享一下d3.js中內置函數有哪些,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
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兩部分組成,很重要卻很簡單的內容,希望好好掌握。
以上是“d3.js中內置函數有哪些”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。