
~~~
<!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>
~~~
- 前言
- 【d3.js教程01】d3入門
- 【d3.js教程02】d3入門
- 【d3.js教程03】動態初探索
- 【d3.js教程04】互動第一步
- 【d3.js教程05】簡單的圖標之弧形
- 【d3.js教程06】force 力導向圖
- 【d3.js教程07】弦圖
- 【d3.js教程08】集群圖cluster
- 【d3.js教程09】包圖pack
- 【d3.js教程10】氣泡圖bubble chart
- 【d3.js教程11】氣泡圖指定顏色
- 【d3.js教程12】地圖
- 【d3.js教程13】氣泡圖一維與多維展示以及數據處理
- 【d3.js教程14】可拖動的地圖詳解
- 【d3.js教程15】如何從excel等表格生成csv數據