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);