---

設定序數尺度

xScale 使用 ordinal(), 屬於離散範疇

var xScale = d3.scale.ordinal()
	.domain(d3.range(dataset.length)) //離散定義域
	.rangeRoundBands([0, w], 0.05); //離散值域

var yScale = d3.scale.linear() //連續
	.domain([0, d3.max(dataset)])
	.range([0, h]);

 

修改矩形元素建立的方式

svg.selectAll("rect").data(dataset).enter().append("rect")
	//修改起始 X 座標和設定寬度
	//rangeRoundBands() v rangeBand()
	.attr("x", function(d, i) {return xScale(i);})
	.attr("width", xScale.rangeBand())
	//修改起始 Y 座標和設定高度
	.attr("y", function(d) {return h - yScale(d);})
	.attr("height", function(d) {
		return yScale(d);
	//填滿顏色方式不變
	}).attr("fill", function(d) {
		return "rgba(" + (85 + d * 3) + ",66,54,1)";
	});

 

修改文字元素起始座標

svg.selectAll("text").data(dataset).enter().append("text").text(function(d) {
		return d;
	}).attr("x", function(d, i) {
		return xScale(i) + xScale.rangeBand() / 2;
	}).attr("y", function(d) {
		return h - yScale(d) + 15;
	}).attr("text-anchor", "middle").attr("font-family", "sans-serif").attr("font-size", "8px").attr("fill", "white");