參考連結：

• D3 > Bar Chart
• D3 > SVG - Circle

---

 

Padding

var w = 500;
var h = 100;
var barPadding = 1; //宣告rect-padding

var dataset = []; 
for (var i = 0; i < 25; i++) {
	var newNumber = Math.floor(Math.random() * 30);
	dataset.push(newNumber);
}

 

SVG

var svg = d3.select("#my3d").append("svg").attr("width", w).attr("height", h);

 

Rectangle

svg.selectAll("rect").data(dataset).enter().append("rect")
	.attr("x", function(d, i){
		return i*(w/dataset.length);
	})
	.attr("y", function(d){
		return h-d*3;
	})
	.attr("width", w/dataset.length-barPadding)
	.attr("height", function(d){
		return d*3;
	})
	.attr("fill", function(d){
		return "rgba(" + (85+d*3) + ",66,54,1)";
	});