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

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

所以說人生苦短，莫用d3~~當然，作為一個有追求的程序猿萌新，對這么一個優(yōu)秀的庫，我們還是秉承著了解學習的態(tài)度，下面由我?guī)Т蠹乙黄鸫蟾蓬I(lǐng)略一下d3吧~

---

官網(wǎng)：https://d3js.org/

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

 1 Arrays (Statistics, Search, Transformations, Histograms)(數(shù)組、 靜態(tài)方法、查找類方法、變換類方法、直方圖)
 2 Axes(坐標軸)
 3 Brushes(刷子)
 4 Chords(弦圖)
 5 Collections(Object,Maps,Sets,Nests)(集合、對象、map、嵌套)
 6 Colors(顏色)
 7 Delimiter-Separated Values(d3-dsv)(dsv模塊)
 8 Dispatches(事件調(diào)度)
 9 Dragging(拖拽)
10 Easings(過渡類型)
11 Forces(力學仿真模擬)
12 Number Formats(數(shù)值格式化)
13 Geographies(地理)
14 Hierarchies(層次結(jié)構(gòu)布局)
15 Interpolators(插值器)
16 Paths(Canvas和SVG之間互轉(zhuǎn))
17 Polygons(二維多邊形)
18 Quadtrees(四叉樹)
19 Queues(隊列)
20 Random Numbers(隨機數(shù))
21 Requests(數(shù)據(jù)請求)
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在國內(nèi)實在運用不廣泛，只有特定的需求才需要用到它，就不詳細解說每一個模塊，挑幾個實用一些的模塊來說說吧~（說不定以后大家會遇到需要用到這方面功能的呢~）

---

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

accessor（訪問器）相當于先把傳入的數(shù)組先做一次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(生成器)，設(shè)置好生成器的需要的設(shè)置，然后這個生成器可以無限用，這樣實現(xiàn)代碼復用，提高性能，例如format：

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

---

Array

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

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

---

Collection

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

get,has,set分別是根據(jù)key來獲取，查看是否存在，設(shè)定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~~~')，把任意格式的字符串轉(zhuǎn)化為一樣的格式對象

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格式轉(zhuǎn)換：

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位小數(shù)

還有其他，例如：

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

date格式轉(zhuǎn)換：

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

相應的有逆轉(zhuǎn)換：

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生成對應數(shù)據(jù)
    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)');
}

總結(jié)

以上是生活随笔為你收集整理的d3浅谈的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。