柱狀圖其實是很簡單阅爽，就是矩形和線的組合路幸，在這里為操作方便我們一般會添加g組。g標(biāo)簽沒有任何別的作用付翁，只是把它的所有children聚到一起而已简肴。下面是800寬，600高的svg上添加了一個柱圖的g組百侧。
效果圖：
p1.png
代碼如下砰识，需要注意的是，g組的transform不會影響坐標(biāo)的改變佣渴。
還有y需要特別注意下辫狼，跟數(shù)學(xué)上的y從下到上不一樣，svg的0點在最上方观话。
<script>
var dataset=[100,50,80,200];
var _svg = d3.select("body")
.append("svg")
.attr("width","800")
.attr("height","600")
.style("background","lightgrey");
var _g=_svg.append("g");//添加g組
_g.attr("transform","translate(50,120)");
var barWidth = 20, barPadding = 30;
var x2 = barPadding * ( dataset.length + 1 ) + barWidth * dataset.length;
_g.append("line")
.attr("x1",0)
.attr("y1","180")
.attr("x2",x2)
.attr("y2","180")
.attr("stroke","steelblue");
_g.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x",function(d,i){
//20為柱子寬度予借，30為柱子之間的間距
return barPadding + barWidth * i + barPadding * i;
})
.attr("y",function(d,i){
//d為柱子的高度，180為x軸的y值
return 180 - d;
})
.attr("height",function(d){return d})
.attr("width","20")
.style("fill","steelblue");
_g.selectAll("text")
.data(dataset)
.enter()
.append("text")
.attr("x",function(d,i){
return 30+20*i+30*i;
})
.attr("y",function(d){
return 160-d;
})
.text(function(d){return d})
.attr("text-anchor","middle")
.attr("fill","darkblue");
</script>
這里用的是數(shù)組里的真實的數(shù)據(jù)作為坐標(biāo)算的，如果數(shù)據(jù)特別大的話就得用到比例尺了~
