d3理解
标签(空格分隔): 未分类
1.绑定数据
[x] 定义:通过循环的方式将数据绑定在dom元素上,每个数据对应一个元素,所以这个数据的值就能来设定dom元素的width,height,x,y坐标等,这就表现了数据驱动的思想,同时也是d3的精华所在。
[x] 我们绑定的数据通过匿名函数function(d,i)来调用,数据的值就能设置dom元素的属性。
所有的标签都可以进行绑定,对rect,circle,text,我们想要数据来驱动任何元素,那么就用数据绑定该元素,通过attr()设置x,y,width,height,fill,等属性,on()来绑定鼠标事件。
svg.selectAll("rect")
.data(dataset) data方法后的语句都会循环,循环次数为数据个数
.enter()
.append("rect")
.attr("x",function(d,i){
return xscale(i);
})
.attr("y",function(d){
return (h-yscale(d));
})
.attr("height",function(d){
return yscale(d);
})
.attr("width",xscale.rangeBand())
.attr("fill",function(d){
return "rgb(0, 0, " + Math.round(d * 10) + ")";
})
.on("click",function(d){
通过on来事件绑定,记住事件绑定种类就可以了
console.log(d);
})
.on("mouseover",function(){
d3.select(this)
.attr("fill","orange")
})
.on("mouseout",function(d){
d3.select(this)
.transition()
.duration(250)
.attr("fill","rgb(0,0,"+d*10+")")
})
.on("click",function(){
sortBar();
})
2.数轴
- [x] 数轴也是d3中的一个对象,先定义一个数轴,然后将这个数轴放到svg中,一般是放在透明g元素中。数轴在定义的时候要讲比例尺映射上去,这样当比例尺改变的时候,我们只要call()一次就好了,在svg对象上,通过call()方法来调用数轴
- [x] 在事件监听器后,重新更新数轴,要放到最后
/*坐标轴声生成*/
var xaxis=d3.svg.axis()
.scale(xscale)
.orient("buttom")
.ticks(10)
// .tickFormat(formator);
var yaxis=d3.svg.axis()
.scale(yscale)
.orient("left")
.ticks(10);
/*g是group的意思,跟html中div作用一样*/
svg.append("g")
.attr("class","x axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xaxis);
svg.append("g")
.attr("class","y axis")
.attr("transform","translate("+(padding)+",0)")
.call(yaxis);
- [x] 给坐标轴添加css属性
坐标轴本身是由path,line,text元素组成的,所以我们可以添加类的方式来设定css属性样式,当然属性名也只能用svg中的属性名。
<style