index.html(圖表頁面)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container"></div>
</body>
<script src="https://d3js.org/d3.v3.js"></script>
<script src="index.js"></script>
</html>index.js(JS代碼)
var data = [0,34.45,45.534,556,76,87,234,234]
verticalShapeChart(data,"#container") //D3生成豎直柱狀圖表
/**
* @desc 豎直柱狀圖表
*/
function verticalShapeChart(data, container) {
var bar_height = 50,
bar_padding = 10,
svg_height = (bar_height+bar_padding) * data.length,
svg_width = 500
var scale = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, svg_width])
//添加svg元素，設定寬度和高度
var svg = d3.select(container)
.append("svg:svg")
.attr("width", svg_width)
.attr("height", svg_height)
//選擇所有的g元素，設定平移位置
var bar = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i){ return "translate(0,"+(bar_height+bar_padding)*i+")";})
//添加矩陣元素，設定填充寬度高度
bar.append("rect")
.attr({
"width": function(d){ return scale(d); } ,
"height": bar_height
})
.style("fill", "steelblue")
//設定圖表文字
bar.append("text")
.text(function(d){ return d; })
.attr({
"x": function(d){ return scale(d); },
"y": bar_height/2,
})
.style("text-anchor", "end")
}
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)