• 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)');
    }
  • 相关阅读:
    创业感言:我的个性,我的情绪,我的表情(转)
    创业难,发掘机会更难:发掘创业良机的七种方式
    我也想有个梦想
    打造你想要的形象,帮助你树立神奇的领导魅力
    游窦圌山有感
    态度决定你的人生高度
    磨练召唤成功的力量,善于从损失中看到价值
    赚钱八大定律成就你的富翁梦
    增强你的大脑——20个不该忽视的记忆窍门
    无言的爱
  • 原文地址:https://www.cnblogs.com/amiezhang/p/8046139.html
Copyright © 2020-2023  润新知