d3的常用方法和數據類型


1. 選擇集自身屬性

1. selection.empty() 選擇集是否為空,為空返回true,否則返回false

2. selection.node() 返回第一個非空元素,無則返回null

3. selection.size() 返回選擇集中的元素個數

2. 選擇集元素屬性

1. attr 設置屬性

2. classed 設置class

3. style 設置行內樣式

4. property 設置屬性,區別於attr,部分屬性不能用attr,例如 input的value,復選框的checked等,不會顯示在標簽上的屬性

5. text 設置或獲取元素內部的內容,不包括標簽,效果同innerText

6. html 設置或獲取元素顳部的html,效果同innerHTML

3. 選擇集的增刪

1. append(name) 追加元素,name為元素名

2. insert(name,[before]) 插入,name為元素名稱,before為css選擇器

3. remove() 刪除元素

選擇集遍歷、排序、過濾

1. each((d,i) => {}) 遍歷

2. filter((d,i) => {}) 過濾

3. sort((a,b) => {}) 排序,同js的array的sort

4. call(func) 對選擇集的每一個元素調用func函數

4. d3數組常用操作

1. d3.ascending 升序函數 var nums = [1,5,2]; nums.sort(d3.ascending);

2. d3.descending 降序函數 var nums = [1,2,5]; nums.sort(d3.descending);

3. d3.min 最小值

4. d3.max 最大值

5. d3.extend 最小和最大值

6. d3.sum 求和

7. d3.mean 求平均值

8. d3.range([start,]stop[,step]) 返回范圍,等差數列

9. d3.shuffle 洗牌數組

10. d3.merge 合並數組

5. d3的映射

d3的映射,map,就是key-value鍵值對,形式上與js的map有些區別。

d3.map([object][,key]) 會產生一個映射,其value,就是object的每個項,key是后面指定的key

例如:

var dataset = [
    {id: 1000, color: "red"},
    {id: 1001, color: "green"},
    {id: 1002, color: "blue"}
]

var map = d3.map(dataset, function(d){return d.id});

得到的映射是 key為 id,value為數組的一項,例如 {id: 1000, color: "red"}

映射有一些常用方法

map.has(key) 
map.get(key)
map.set(key,value)
map.remove(key)
map.keys()
map.values()
map.entries()
map.each()
map.empty()  //是否為空
map.size()   //映射大小

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM