我要评论代码实现柱状图（2）
<script type="text/javascript">
var dataset=[];
for (var i=0;i<30;i++){
var num=Math.round(Math.random()*30);
dataset.push(num);
}
// var dataset=[5,15,25,35,45,12,12,23,65,43,78,33,33,43,12,12,23,65,43,78,33,65,43,78,33,33,43,12];
var h=350;
var w=800;
var maxvalue=80;
var svg=d3.select("body").append("svg");
svg.attr("height",h)
.attr("width",w);
/*根据数据个数映射到w，平均分配宽度，间距是0.5，*/
var xscale=d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0,w],0.1);//ordinal是一个序数比例尺，会根据数据集数量来平均分段，且保存了每段的宽度，
/*将y值映射到0-100*/
var yscale=d3.scale.linear()//当数据类型不是点集的形式，max（）下不用嵌套匿名函数
.domain([0,d3.max(dataset,function(d){
return d;
})])
.range([5,h]);
svg.selectAll("rect")
.data(dataset)
.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) + ")";
});
/*svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x",function(d,i){
return w*i/dataset.length;
})
.attr("width",function(d,i){
return w/dataset.length-2;
})
.attr("height",function(d){
return d;
})
.attr("y",function(d){
return h-d;//svg中矩形的坐标是左上角到右下角，且只能从上向下长，既然只能从上向下，那么久改变用h-d
})
.attr("fill",function(d){
return "rgb(0,0,"+d*10+")";
});
*/
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d){
return d;
})
.attr("x",function(d,i){
return xscale(i);
})
.attr("y",function(d){
return (h-yscale(d)+12);
})
.attr("font-size","10px")
.attr("fill","white");
d3.select("button")
.on("click",function(){
var dataset=[];
for (var i=0;i<30;i++){
var num=Math.round(Math.random()*maxvalue);
dataset.push(num);
}
var xscale=d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0,w],0.1);//ordinal是一个序数比例尺，会根据数据集数量来平均分段，且保存了每段的宽度，
/*将y值映射到0-100*/
var yscale=d3.scale.linear()//当数据类型不是点集的形式，max（）下不用嵌套匿名函数
.domain([0,d3.max(dataset,function(d){
return d;
})])
.range([5,h]);
svg.selectAll("rect")
.data(dataset)
.transition()
.delay(function(d,i){//每个加载数据延迟
return i/dataset.length*2000;
})
.duration(5000)
.ease("linear")
.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("+Math.round(d * 10)+",100, 0)";
});
svg.selectAll("text")
.data(dataset)
.transition()
.delay(function(d,i){//每个加载数据延迟
return i/dataset.length*1000;
})
.text(function(d){
return d;
})
.attr("x",function(d,i){
return xscale(i);
})
.attr("y",function(d){
return (h-yscale(d)+12);
})
.attr("font-size","10px")
.attr("fill","white");
})
</script>
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论