d3淺談

d3是一個及其龐大的庫，有20個模塊,大小也達到了216kb，是JQ1.x的2倍多，JQ3.x的3倍多，JQ原本就挺笨重的一個庫，d3更是如此，可是它的功能確實很強悍~

d3的定位是一個科學計算庫，並非一個圖形庫，只是它能幫你算出路徑，可是把路徑畫成svg圖它是沒有幫你的，有時候算出來的路徑還要通過一系列處理。

因此說人生苦短，莫用d3~~固然，做爲一個有追求的程序猿萌新，對這麼一個優秀的庫，咱們仍是秉承着瞭解學習的態度，下面由我帶你們一塊兒大概領略一下d3吧~

---

官網：https://d3js.org/

能夠看到d3有以下這麼20個模塊，

 1 Arrays (Statistics, Search, Transformations, Histograms)(數組、 靜態方法、查找類方法、變換類方法、直方圖)
 2 Axes(座標軸)
 3 Brushes(刷子)
 4 Chords(弦圖)
 5 Collections(Object,Maps,Sets,Nests)(集合、對象、map、嵌套)
 6 Colors(顏色)
 7 Delimiter-Separated Values(d3-dsv)(dsv模塊)
 8 Dispatches(事件調度)
 9 Dragging(拖拽)
10 Easings(過渡類型)
11 Forces(力學仿真模擬)
12 Number Formats(數值格式化)
13 Geographies(地理)
14 Hierarchies(層次結構佈局)
15 Interpolators(插值器)
16 Paths(Canvas和SVG之間互轉)
17 Polygons(二維多邊形)
18 Quadtrees(四叉樹)
19 Queues(隊列)
20 Random Numbers(隨機數)
21 Requests(數據請求)
22 Scales (Continuous, Sequential, Quantize, Ordinal)(比例尺)
23 Selections (Selecting, Modifying, Data, Events, Control, Local Variables, Namespaces)(選擇集)
24 Shapes (Arcs, Pies, Lines, Areas, Curves, Symbols, Stacks)(形狀)
25 Time Formats(日期時間)
26 Time Intervals(時間間隔)
27 Timers(定時器)
28 Transitions(過渡)
29 Voronoi Diagrams(Voronoi圖)
30 Zooming(縮放)

由於d3在國內實在運用不普遍，只有特定的需求才須要用到它，就不詳細解說每個模塊，挑幾個實用一些的模塊來講說吧~（說不定之後你們會遇到須要用到這方面功能的呢~）

---

 

在介紹模塊前，不得不提的是d3的核心觀念，accessor（訪問器）和 genertor(生成器)

accessor（訪問器）至關於先把傳入的數組先作一次map映射，如d3.max(arr,accessor):

//例如想取得年紀最大的人
let arr = [{name:'david',age:12},{name:'james',age:14},{name:'rick',age:26},{name:'wade',age:18}];
let res = d3.max(arr,item=>item.age); //26

generator(生成器)，設置好生成器的須要的設置，而後這個生成器能夠無限用，這樣實現代碼複用，提升性能，例如format：

let gen = d3.format('.3f');
gen(15); //15.000
gen(13.6798); //13.680

---

 

Array

有這些經常使用的方法max、min、extend(最大最小一塊兒返回)、sum、mean（均值）、median（中位數）、quantile（分位數）

let arr = [5,8,12,26,18];
d3.extent(arr); //[5,26]

---

Collection

map方法，創建一個映射對象，item=>item.name是指定哪一個是map的key

get,has,set分別是根據key來獲取，查看是否存在，設定map對象，固然還有不少其餘的方法

let arr1 = [{name:'david',age:12},{name:'james',age:14},{name:'james',age:17},{name:'rick',age:26},{name:'wade',age:18}];
let map = d3.map(arr1,item=>item.name);
console.log(map.get('james')) //{name: "james", age: 17}
console.log(map.has('james')) //true
map.set("alibaba", {name: "alibaba", age: 30});
console.log(map.get('alibaba')) //{name: "alibaba", age: 30}

---

color

d3.color('colorStr~~~')，把任意格式的字符串轉化爲同樣的格式對象

console.log(d3.color('rgba(100,100,150,.5)'));//{r: 100, g: 100, b: 150, opacity: 0.5}
console.log(d3.color('rgb(200,129,150)'));//{r: 200, g: 129, b: 150, opacity: 1}
console.log(d3.color('gray'));//{r: 128, g: 128, b: 128, opacity: 1}
console.log(d3.color('#ccc'));//{r: 204, g: 204, b: 204, opacity: 1}

---

formats

number格式轉換：

let gen = d3.format('.2f');
console.log(gen(15));   //15.00
console.log(gen(13.679));   //13.68
let gen2 = d3.format('5.0f');
console.log(gen2(1));   //    1

和c語言差很少，例如5.2f表示——總共5位，保留2位小數

還有其餘，例如：

d3.format("$")(10);     //"$10"
d3.format("#")(0b1111); //"15"
d3.format(",")(100000); //"100,000"

date格式轉換：

let dateGen = d3.timeFormat("%y年%m月%d日 %H:%M:%S");
console.log(dateGen(new Date()))； //17年12月16日 10:16:26

相應的有逆轉換：

let dateParse = d3.timeParse("%y年%m月%d日 %H:%M:%S");
console.log(dateParse('17年12月16日 10:16:28'));  //Sat Dec 16 2017 10:16:28 GMT+0800 (中國標準時間)

---

shape

用於畫任何圖形，例如畫餅圖：

window.onload=function(){
    //d3.pie生成對應數據
    let data = [80,50,60,100,20];
    let pieData = d3.pie()(data);
    //d3.arc
    let arc = d3.arc().innerRadius(0).outerRadius(150);
    let g = d3.select('body').append('svg').attr('width',800).attr('height',600).append('g');
    let color = ['#fc0','#cf0','#0fc','#f0c','#c0f'];
    pieData.forEach((item,index)=>{
      //arc(item)把每一份pie傳給arc,生成路徑
      g.append('path').attr('d',arc(item)).attr('fill',color[index]).attr('stroke','#000');
    })
    g.attr('transform','translate(500,200) rotate(30)');
}