第一个d3.js程序-柱状图

2015年02月10日 javascript, 前端技术, 网站建设 暂无评论 阅读 111 views 次

<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.axis path, .axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width = 600;
var height = 600;

//追加一个svg对象
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height);

var dataset = [ 30 , 20 , 45 , 12 , 21 ];
//定义比例尺
var wx = d3.scale.linear()
.domain([0,d3.max(dataset)])
.range([0,500]);
//定义坐标轴
var axis = d3.svg.axis()
.scale(wx)
.orient("bottom");

//选择所有的rect元素 rect在后面添加完成后,即被选中
svg.selectAll("rect")
//将数据绑定要这个 <svg> 上, 下面的function中的d的值来自此处
.data(dataset)
// enter() 表示当所需要的元素( <rect> )比绑定的数据集合的元素( dataset )少时,自动添加位置,使得与数据集合的数量一样多
.enter()
// 添加元素 <rect>
.append("rect")
//柱状图左对齐在x=10的位置
.attr("x",10)
//柱状图Y轴每30单位放置一个
.attr("y",function(d,i){
return i * 30;
})
//柱状图的宽度、按传入的值10倍显示宽度。
//.attr("width",function(d,i){
// return d * 10;
// })
//宽度会随着绑定的数据自动变化 按上面的的比例尺
.attr("width",wx)
//柱状图高度
.attr("height",28)
//柱状图颜色
.attr("fill","red");
//添加坐标轴
svg.append("g")
//添加class
.attr("class","axis")
//用于移动坐标轴在 svg 绘制框中的位置
.attr("transform","translate(10,160)")
//调取函数
.call(axis);

</script>
</body>
</html>

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.  

用户登录

分享到: