d3淺談

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

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

所以說人生苦短，莫用d3~~當然，作為一個有追求的程序猿萌新，對這么一個優秀的庫，我們還是秉承着了解學習的態度，下面由我帶大家一起大概領略一下d3吧~

---

官網：https://d3js.org/

可以看到d3有如下這么20個模塊，

Arrays (Statistics, Search, Transformations, Histograms)(數組、 靜態方法、查找類方法、變換類方法、直方圖)
Axes(坐標軸)
Brushes(刷子)
Chords(弦圖)
Collections(Object,Maps,Sets,Nests)(集合、對象、map、嵌套)
Colors(顏色)
Delimiter-Separated Values(d3-dsv)(dsv模塊)
Dispatches(事件調度)
Dragging(拖拽)
Easings(過渡類型)
Forces(力學仿真模擬)
Number Formats(數值格式化)
Geographies(地理)
Hierarchies(層次結構布局)
Interpolators(插值器)
Paths(Canvas和SVG之間互轉)
Polygons(二維多邊形)
Quadtrees(四叉樹)
Queues(隊列)
Random Numbers(隨機數)
Requests(數據請求)
Scales (Continuous, Sequential, Quantize, Ordinal)(比例尺)
Selections (Selecting, Modifying, Data, Events, Control, Local Variables, Namespaces)(選擇集)
Shapes (Arcs, Pies, Lines, Areas, Curves, Symbols, Stacks)(形狀)
Time Formats(日期時間)
Time Intervals(時間間隔)
Timers(定時器)
Transitions(過渡)
Voronoi Diagrams(Voronoi圖)
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)');
}