快捷導(dǎo)航

d3.js中冷門卻實(shí)用的內(nèi)置函數(shù)總結(jié)

更新時(shí)間：2017年02月04日 11:53:09 作者：Chih-Hao

D3.js是一個(gè)JavaScript庫，它可以通過數(shù)據(jù)來操作文檔。D3可以通過使用HTML、SVG和CSS把數(shù)據(jù)鮮活形象地展現(xiàn)出來。d3.js其實(shí)提供了很多內(nèi)置的函數(shù)，可以卻被大家忽略了，下面這篇文章就來給大家詳細(xì)介紹了d3.js中冷門卻實(shí)用的一些內(nèi)置函數(shù),需要的朋友可以參考借鑒。

前言

其實(shí)在d3.js的API文檔中，提供了很多內(nèi)置的函數(shù)，但是有些很有用的內(nèi)置函數(shù)卻被無情的忽略了，這篇博客就來整理整理這些被遺忘卻很實(shí)用的函數(shù)。希望整理過后，他們不再被遺忘。

selection.classed(name,【value】)

value參數(shù)可選，如果沒有指定，則返回與name參數(shù)匹配的第一個(gè)非空元素是否綁定了指定的CSS類，true表示綁定，false表示未綁定。如果value指定了的話，就是為selection添加/刪除CSS類。

這點(diǎn)與selection.attr(name,【value】)非常類似，但是相比而言，就冷門的多，恐怕沒有多少人不知道selection.attr(name,【value】)，但是有很多人真的不知道selection.classed(name,【value】) 。

這個(gè)函數(shù)很實(shí)用，比如鼠標(biāo)進(jìn)入某些點(diǎn)，讓這些點(diǎn)高亮以表示強(qiáng)調(diào)，但是移出去之后，讓他們回復(fù)原來的樣式就可以用這個(gè)函數(shù)，免去了重新設(shè)置樣式的麻煩，甚至有時(shí)候恢復(fù)原來樣式的時(shí)候，還需要判斷，就更麻煩了。

transition.filter(selector)

過濾也有過渡，這點(diǎn)可能很多人都忽略了，比如設(shè)置動(dòng)畫結(jié)束時(shí)，索引為奇數(shù)的元素旋轉(zhuǎn)30度。甚至可以自己定義規(guī)則，如第5、10、15個(gè)元素改變，其他的不變。

d3.interpolate(a,b)

返回一個(gè)介于a,b之間的默認(rèn)插值器，插值器的類型取決于b的類型。

1）如果b是顏色類型，那么返回的是interpolateRgb插值器

2）如果是字符串類型，則返回interpolateString插值器

3）如果是數(shù)組類型，則返回interpolateArray插值器

4）如果是對(duì)象類型，且不能強(qiáng)制轉(zhuǎn)換成字符串類型，則返回interpolateObject插值器

5）否則，返回interpolateNumber插值器

數(shù)組相關(guān)API

使用d3時(shí)，會(huì)有大量的數(shù)組操作，如果能合理運(yùn)用d3提供的數(shù)組相關(guān)的函數(shù)，將會(huì)使得工作效率大大提高。

d3.ascending(a,b)

如果a\b，返回1，如果a=b,返回0.

在可視化元素需要有序的時(shí)候，這個(gè)函數(shù)很有用，可以幫助我們排好序。

d3.min(),d3.max(),d3.extent()

前兩個(gè)函數(shù)知道的人應(yīng)該不少，但是最后一個(gè)卻相對(duì)冷門，它可以直接返回?cái)?shù)組自然排序的最小值和最大值，省的同時(shí)調(diào)用前面兩個(gè)函數(shù)了。

d3.sum(),d3.mean(),d3.median(),d3.quantile()

基本的求和、平均數(shù)、中位數(shù)、p分位數(shù)，都幫你實(shí)現(xiàn)好了，之前還傻乎乎的自己去實(shí)現(xiàn)了，雖然不難，但是代碼會(huì)很難看。

d3.shuffle(array)

用Fisher-Yates shuffle算法把傳入的數(shù)組隨機(jī)排序。這樣想得到亂序的時(shí)候會(huì)不會(huì)比較高大上呢？嘿嘿。

d3.keys(object),d3.values(object)

keys返回一個(gè)包含指定對(duì)象(關(guān)聯(lián)數(shù)組)中所有屬性名稱的數(shù)組。這點(diǎn)很有用，比如用d3.csv()讀文件的時(shí)候，想要濾掉一些無關(guān)的dimension，比如id等等，用這個(gè)函數(shù)就很有用。

d3.map(),d3.set()

映射與集合是很常見的數(shù)據(jù)結(jié)構(gòu)，但是不是所有js版本中都有默認(rèn)的實(shí)現(xiàn)的，但是d3提供了。昨天在做項(xiàng)目的時(shí)候就遇到了這個(gè)問題，最后是借用了d3提供的map與set解決了。

d3.merge（arrays）

合并指定參數(shù)arrays為一個(gè)數(shù)組，與內(nèi)置的concat類似，不過處理二維數(shù)組的時(shí)候，它會(huì)更方便。

d3.zip(arrays)，d3.pairs(arrays)

d3.zip(【1，2】，【3，4，5】)返回【【1，3】，【2，4】】有啥用自己體會(huì)。

d3.pairs(【1，2，3，4】)返回【【1，2】，【2，3】，【3，4】】

d3.transpose(matrix)

轉(zhuǎn)置二維矩陣用的。

brush

作為一個(gè)可視化系統(tǒng)，怎么能沒有brush！實(shí)現(xiàn)brush的功能非常簡(jiǎn)單，構(gòu)造刷子之前，需要制定x/y比例尺和空的范圍。繪制的刷子可以重新調(diào)整大小和位置。

時(shí)間的計(jì)數(shù)