d3浅谈

Posted 2020-10-17 张啊咩

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