d3.js学习笔记

Posted 2020-07-22 come_on

入门好文：http://www.ourd3js.com/wordpress/?p=51

d3.js和d3.min.js内容一样，后者是压缩过的，适合发行版本，前者适合开发人员。

1.选择集(满足css选择符的要求)主要和数据绑定一起使用

d3.select()

d3.selectAll()

var body = d3.select("body")

2.数据绑定(实质就是在选择集的元素对象里面添加一个变量，并赋值)

p.text(function(d,i)){return d+" "+i}

update、enter（不够）、exit（多于）处理模板，在d3中较为常用

3.画柱形图

 

1.比例尺

第一个是连续序列，第二个是离散序列、第三个是对时间序列

2.坐标轴

　　https://github.com/d3/d3/wiki/SVG

 

svg是一种支持矢量的画布，矢量图放大缩小是不会有影响的，标量图放大缩小会失真。

控制台输出：console.log()

 function(d, i)，d 代表与当前元素绑定的数据，i 代表索引号

选择、插入、删除元素

 

tempdatax

用户间的通话记录（即用户a和用户b在什么时候进行过通话）

tempdata

目标用户间的通话频次

151是什么？？？？？？？？？？

 

for(var i=0;i<tempdatax.nodes.length;i++){
        var tempimg=Math.floor(Math.random()*151)+1;//151是什么？？？？？
        if(tempimg>102){
            tempimg=icon_list[Math.floor(Math.random()*6)].url;
        }else{//内部员工，有头像
            tempimg="img/image/"+((tempimg < 10 && "00"+tempimg)||(tempimg >=10 && tempimg < 100 && "0"+tempimg)||(tempimg >= 100 && tempimg))+".jpg";
        }
        nodearray.push({
        "id":""+tempdatax.nodes[i].id,//唯一id
        "img":{"url":tempimg,"width":16,"height":16},//图片数据路径
        "title":""+tempdatax.nodes[i].id,
        "propn":1,//属性显示个数，从prop笿个开始计敿        
        "prop":[{"title":"name","value":tempdata.nodes[Math.floor(Math.random()*76)].name+"","type":0}],//元数据title标题value值，type显示方式0只显示值，1全部显示＿只显示标颿        
        "event":{
            "click":function(d){},
            "dblclick":function(d){}    
        },
        "propvalue":{}
        });
};