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)');
}