d3学习笔记

1.选择器  select  selectAll

2.数据绑定   datanum  绑定单个   data 绑定数组

在数据和绑定标签不对应的情况：

var update = p.data(dataset);   数据刚好帮定的数据

。text(d)->{ reuten d}

var enter = update.enter();   没有元素可以绑定的数组内容

.append(p)

.text d->return d;   //多个的数据，添加标签来绑定

         var exit =update.exit();   数据比元素个数少的时候才有值，这里是多余的标签

.remove();

常用用法：

var svg = body.append("svg")

.attr("width,width).atter("heigth,heigth);

var rects = svg.selectAll(".myBect).data(dataset).enter().append("rect).attr("class,MyRect)

.attr("x,(d,i)->return 20*35*i).attr("y,d->return heith - 80-d).attr("width,30),attr.(heihgt),30;

3.柱形图，比例尺

var linear = d3.scale.linear().domain([0,100]).range([0,300]);   domain横坐标 range y坐标

var ordinal = d3.scale.ordinal()   //分散的叙述比例尺

.domain([1,2,3])

.range([10,11,12])

4.生成相关元素 坐标轴

var  axax = d3.svg.axis().scale().orient();

5.d3.text   和 d3.json  读取文件函数

6.线段生成器

var dataset = [(x:10,y100),{20,200}]

var line = d3.svg.line()

.x( function(d) {return d.x})

.y( function(d),{return d.y})

.interpolate();//对线段如何处理

svg.aappend("path).attr(class,mypath).attr(d,line(dataset));

7.过度效果

circle.tansition()。

duration(1000) //1秒  平移时间

  .attr(cx,230);//平移效果
.ease(bounce)//过度效果

.atr(r,100) //平移之后大小

8.数据更新

首先获取update部分，

获取enter = updatee.enter();

  var exit = update.exit();

enter.append() 有数据没元素，插入元素，并绑定

update.atrr();//更新数据

exit.remove();

9.定义按钮开关，来更新数据。

dataset.prp(); 减少

10.12种布局

饼状图

var pie=d3.layout.pie();

d3.svg.src()//获得弧形路径  也就是圆圈

.innerRandius()//内半径

.outerRadius();//外半径

var color = d3.scale.category10();//颜色比例尺

.append(path)

.attr(d->regurn d)

求取路线的中心函数  var center = arc.centroid(d);