【d3.js教程01】d3入门
最后更新于：2022-04-01 14:17:55
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.axis path,
.axis line{
fill:none;
stroke:black;
shape-rendering: crispEdges;
}
.axis text{
font-family: sans-serif;
font-size: 11px;
}
</style>
<script src="js/d3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<svg></svg>
<body>
<script type="text/javascript">
var svg = d3.select("svg"); //获取svg元素
var dataset = [1.2,2.3,0.9,1.5,3.3]; //数据集
var max = d3.max(dataset); //选择数据集中最大值即3.3
var linear = d3.scale.linear() //添加比例尺
.domain([0,max])
.range([0,250]); //自定义比例尺范围
var rectHeight = 25; //矩形的高
svg.selectAll("rect") //获取目前svg中所有的矩形
.data(dataset) //绑定数据集到
.enter() //选择数据集比rect元素多出来的数据（因为svg中原先没有rect，也就是选中了所有的数据）（也就是为什么后面会产生很多个rect）
.append("rect") //针对每个多出来的数据都添加一个rect元素
.attr("x",20) //设置rect 横坐标
.attr("y",function(d,i){ //设置rect 纵坐标 function中d代表dataset中的每一个data，i为index
return i*rectHeight;
})
.attr("width",function(d,i){ //设置rect 宽度（将数据集中的数据经过比例尺算出最终的数据）
return linear(d);
})
.attr("height",rectHeight-2) //设置rect 高度
.attr("fill","steelblue"); //rect填充色
var axis = d3.svg.axis() //设置坐标轴
.scale(linear) //为坐标轴设置比例尺
.orient("bottom") //设置坐标轴的方向
.ticks(7); //设置坐标轴上有几个刻度
svg.append("g") //g代表group,svg添加一个g
.attr("class","axis") //设置g的css
.attr("transform","translate(20,125)") //设置变形
.call(axis); //调用axis函数初始化（相当于axis(svg.append("g").attr("class","axis").attr("transform","translate(20,125)"))）
</script>
</body>
</html>
~~~