d3.js

d3.js

//d3.js是一个数据可视化的库
    <script type="text/javascript" src="d3.js"></script>
    <script type="text/javascript">
        //d3可以操作dom元素
        window.onload = function (){
            let oDiv = d3.select('body').append('div');
            oDiv.style('width','300px');
        }
        //d3主要还是用来操作图形
        window.onload = function (){
            let oSvg = d3.select('body').append('svg');
            oSvg.attr('width',300);
            oSvg.attr('height',800);
            oSvg.append('path').attr('d','M 100 100 L 400 100 100 500').attr('stroke','black').attr('fill','none');
        }
//d3重点的功能为对图形的计算,generator 生成器
        window.onload = function (){
            let datas = [
                {name:"1月",value:2108},
                {name:"2月",value:1108},
                {name:"3月",value:3108},
                {name:"4月",value:1108}
            ]
            //创建generator生成器
            let line = d3.line();//折线图生成器
            line.x(json=>parseInt(json.name)*50);
            line.y(json=>json.value/100);
            //调用generator,生成路径
            let gen = line(datas);
            console.log(gen);
            //将生成的路径放到svg中
            let oSvg = d3.select('body').append('svg');
            oSvg.attr('width',800);
            oSvg.attr('height',800);
            oSvg.append('path').attr('d',gen).attr('stroke','black').attr('fill','none');
        }

//d3数组操作
        console.log(d3.max([12,55,98,43]));//返回最大数字==》98
        console.log(d3.min([12,55,98,43]));//返回最小数字==》12
        console.log(d3.extent([12,55,98,43]));//返回数组所在范围==》12,98
        console.log(d3.color());//参数可以使任意的颜色==》red\#002541\grb(255,202,11)
//d3集合操作
        let set = d3.set([
            {name:'blue',age:18},
            {name:'blu',age:181},
            {name:'ble',age:182},
            {name:'bue',age:183},
            {name:'lue',age:184}
        ],json=>json.name);//调用时返回的是name
        alert(set.has('blu'));
        let map = d3.map([
            {name:'blue',age:18},
            {name:'blu',age:181},
            {name:'ble',age:182},
            {name:'bue',age:183},
            {name:'lue',age:184}
        ],json=>json.name);//调用时返回的是name
        alert(map.get('blu'));
//d3随机数操作
    d3.randomUniform(0,20)//均值分部==>随即出的数平均分布在0-20之间
    d3.randomNormal(15)//正态分部==>随即出的数大部分靠近15
//d3数字格式化
    let gen = d3.format('f')//格式化成浮点数,i是转化成int
    alert(gen(73))//==>73.000
    let gen1 = d3.format('08.3f')//长度八位,不足补0,保留小数点后三位
    alert(gen1(73))//==>0073.000
//d3时间格式化
    let gen = d3.timeFormat('%Y-%-m%-d');
    let t = Date.now();
    alert(gen(t));
//d3操作队列
//d3事件分发
    </script>

d3画图