D3

D3的知识体系

1) 选择集、数据绑定、dom操作.

2）比例尺和坐标轴.

3）绘制（几种生成器）.

a)线段生成器.    
b)区域生成器.      
c）弧生成器.    
d)符号生成器.  
e)弦生成器.    
f)对角线生成器.    

选择集

d3.select('p');  只会选择住一个p标签
d3.selectAll('p') 会选中所有的p标签

将数据和dom一一对应（此时p标签和arr个数对应）

var p = d3.selectAll('p');
var arr= [3,6,9];
var update = p.data(arr)
update.text(d=>d); 
//将arr插入p标签中；

将数据和dom一一对应（此时p标签和arr个数不对应）

 var p = d3.selectAll('p');
var arr= [3,6,9，12，15];
var update = p.data(arr)
update.text(d=>d); 
此时12就不会被渲染进去；

当数据（数组）的长度大于dom的长度时，多的这部分组成的集合就叫做enter

dom少了需要添加补足

var enter=update.enter();
enter.append('p')
.text(d=>d)

当数据（数组）的长度小于dom的长度时，dom多的这部分就叫做exit

dom多了需要删除

var exit = update.exit();
exit.remove();

dom操作

-（1） attr()

• (2) append()
• (3) insert()
• 等

加载数据

d3.json(url,callback);

树图入门

1）树图api

a) d3.layout.tree() 创建你一个树形布局

b) tree.size([]) 设置宽高

c) tree.separation([separation]) 设置相邻节点间隔

d) tree.nodes(root) 根据root计算 获取节点数组

e) tree.links(nodes). 根据nodes计算 获取连线数组

2） 节点对象（nodes），包含以下属性

a) parent:父节点

b) children:子节点

c) depth:节点深度

d) x:节点的x坐标

e) y:节点的y坐标

3) 节点的连线（links）对象，包含以下属性

a) source:前端节点

b) target：后端节点

实现步骤

1.选中页面设置svg绘制区域的宽和高添加g元素 设置位置

2. 生成树状布局 设置尺寸

3. 对角线生成器

4. 请求数据

4.1 获取nodes节点数组。和link连接线数组

4.2 生成连线

4.3 生成节点

4.4 给节点生成圆圈 设置半径

4.5 给节点添加文本 设置文本的样式 位置

学习地址

http://wiki.jikexueyuan.com/project/d3wiki/layout.html