<html>
<body>
<script src="d3.js"></script>
<script>
var w=window.innerWidth;//通过这两个获取窗口的宽和高
var h=window.innerHeight;
w=w*0.98;
h=h*0.9;
//用户实际所用到的地方要小一些，所以要分别缩小一点，不然会超出用户的页面可用范围、
//高要小的稍微多一点
var dataset=new Array(10);
for(var i=0;i<10;i++){
dataset[i]=500*Math.random();
}
var svg=d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h);
/*这个是绘制一个方块儿的，就加了注释了，下面的是按照给的数据集绘制一堆方块儿
// svg.append("rect")
// .attr("x",0)
// .attr("y",0)
// .attr("width",100)
// .attr("height",400)
// .attr("fill","blue");*/
//下面这里是要把dataset中的数据全部画出来，d3.js有这种方式，可以直接填满
//如下方代码所示，匿名函数是用来传参数的，
//d就是数组那个位置的data，值；i是index，是数组的某个位置对应的下标
//匿名函数很有用
//这里的attr是用来设置参数的。
//下面的表达很重要一定要记住。
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x",function(d,i){
return (w/dataset.length)*i;
})
.attr("y",function(d){
return h-d;
})
.attr("width",function(d,i){
return w/dataset.length-10;
})
.attr("height",function(d){
return d;
})
.attr("fill","blue");
</script>
</body>
</html>
4027
09-24
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
