github堆栈
戳这里 镜心的小树屋
不必svg
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>d3 | bar chart</title>
<link rel="stylesheet" href="">
<script src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<div class="chart"></div>
<script>
var data = [4,8,15,16,23,42,12];
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, 420]);
/* 下面代码的运转结果是天生一个条状图,然则没有对条状图的长度举行掌握,下面采纳scale.linear要领对数据长度举行设置。 */
d3.select(".chart")
.selectAll("div")
.data(data) //data要领用于对选中的结果集绑定数据。
.enter().append("div") //enter要领和append要领示意因为此时div元素还不存在,必需依据数据的个数将它们制造出来。
.style({'width': function (data) {return x(data) + "px";} ,"background": "black","border": "2px solid #fff","color": "#fff"})
.text(function(data) {return data;});
//style要领和text要领的参数是函数,示意函数的运转结果就是设置网页元素的值
/*reference*/
// http://www.danasilver.org/github-language-stats/
// http://javascript.ruanyifeng.com/library/d3.html
</script>
</body>
</html>
用svg
结果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>linechart</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="container"></div>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="js/index.js"></script>
</body>
</html>
var data = [1,6,4,3,3,8,5,4,3,7],
bar_height = 50,
bar_padding = 10,
height = (bar_height + bar_padding)*data.length,
width = 600;
var scale = d3.scaleLinear()
.domain([0,d3.max(data)])
.range([0,width]);
var svg = d3.select("#container")
.append("svg").attr("width",width).attr("height",height)
var bar = svg.selectAll("g").data(data).enter().append("g").attr("transform",function(d,i){
return "translate(0,"+i*(bar_height+bar_padding)+")";
})
bar.append("rect").attr("width",function(d){return scale(d);})
.attr("height",bar_height
).style("fill","steelblue")
bar.append("text").text(function(d){return d;}).attr("x",function(d){return scale(d+0.1);}).attr("y",bar_height/2)
注重
d3.v3版本 : d3.scale.linear()
d3.v4版本 : d3.scaleLinear()
参考
https://bost.ocks.org/mike/
http://www.imooc.com/video/4743
http://javascript.ruanyifeng….
http://www.danasilver.org/git…
D3.js柱状图例子