欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

d3.js中冷門卻實用的內置函數(shù)總結

 更新時間:2017年02月04日 11:53:09   作者:Chih-Hao  
D3.js是一個JavaScript庫,它可以通過數(shù)據(jù)來操作文檔。D3可以通過使用HTML、SVG和CSS把數(shù)據(jù)鮮活形象地展現(xiàn)出來。d3.js其實提供了很多內置的函數(shù),可以卻被大家忽略了,下面這篇文章就來給大家詳細介紹了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兩部分組成,很重要卻很簡單的內容,希望好好掌握。

好了,以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。

相關文章

最新評論