尺度轉換前

尺度轉換後

建立動態尺度

var xScale = d3.scale.linear()
	.domain([0, d3.max(dataset, function(d){return d[0];})])
	.range([0, w]);
var yScale = d3.scale.linear()
	.domain([0, d3.max(dataset, function(d){return d[1];})])
	.range([h, 0]);

 

尺度變換後，修改圓形元素屬性 cx, cy

.attr("cx", function(d) {
	return xScale(d[0]);
}).attr("cy", function(d) {
	return yScale(d[1]);
})

 

尺度變換後，修改文字元素屬性 x, y

.attr("x", function(d) {
	return xScale(d[0]) + 3;
}).attr("y", function(d) {
	return yScale(d[1]) + 3 * 2;
})

---

Margin Convention、Multi-Value Maps

邊界設定

var padding = {top: 20, right: 60, bottom: 20, left: 10};

 

改寫動態尺度

var xScaleN3 = d3.scale.linear()
	.domain([0, d3.max(dataset, function(d) {
		return d[0];
	})])
	.range([padding.left, w - padding.right]);
var yScaleN3 = d3.scale.linear()
	.domain([0, d3.max(dataset, function(d) {
		return d[1];
	})])
	.range([h - padding.bottom, padding.top]);