效果圖：
<!DOCTYPE html>
<html>
<head>
<title>Data Visualizaiton</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<svg width="960" height="600" style="border:red solid 1px"></svg>
<script>
var marge = {top:60,bottom:60,left:60,right:60}
var svg = d3.select("svg");//得到SVG畫布
var width = svg.attr("width");//得到畫布的寬
var height = svg.attr("height");//得到畫布的長
var g = svg.append("g")
.attr("transform","translate("+marge.top+","+marge.left+")")
var dataset = [10,20,30,23,13,40,27,35,20];
var innerWidth = width-marge.left-marge.right;
var innerHeight = height - marge.top-marge.bottom;
var xScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.range([0,innerWidth])
.padding(0.2); //添加柱子之間的間距
//繪製X軸，並把刻度拉長
var xAxis = d3.axisBottom(xScale).tickSize(-innerHeight);
var yScale = d3.scaleLinear()
.domain([0,d3.max(dataset)])
.range([innerHeight,0]);
//繪製y軸，並把刻度拉長
var yAxis = d3.axisLeft(yScale).tickSize(-innerWidth);
g.append("g")
.attr("transform","translate("+0+","+(height-marge.top-marge.bottom)+")")
.call(xAxis);
g.append("g")
.attr("transform","translate(0,0)")
.call(yAxis);
//繪製矩形和文字
var gs = g.selectAll(".rect")
.data(dataset)
.enter()
.append("g");
//繪製矩形
gs.append("rect")
.attr("x",function(d,i){
return xScale(i);
})
.attr("y",function(d){
return yScale(d);
})
.attr("width",function(){
return xScale.bandwidth();
})
.attr("height",function(d){
return innerHeight-yScale(d);
})
.attr("fill","blue");
//繪製文字
var rectPadding = 0;//矩形之間的間隙
gs.append("text")
.attr("x",function(d,i){
return xScale(i) ;
})
.attr("class","tt")
.attr("width",xScale.bandwidth())
.attr("y",function(d){
return yScale(d);
})
.attr("dx",function(){
xScale.step();
})
.attr("dy",20)
.text(function(d){
return d;
})
//.attr("text-anchor", "middle")
.attr("fill","white");
d3.selectAll(".tt").style("border","red solid 1px");
</script>
</body>
</html>