學習參考：【 D3.js 入門系列 — 4 】 比例尺的使用
比例尺：d3.scale
線性比例尺：d3.scale.linear()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<strong><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></strong>
<title>比例尺</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script >
var dataSource=[10,100,30,50,130];
var linear=<strong>d3.scale.linear()//</strong>獲得線性比例尺
.<strong>domain</strong>([0,d3.max(dataSource)])//設置定義域
.<strong>range</strong>([0,100]);//設置值域
var svg=d3.select("body")
.append("svg")
.attr("width",400)
.attr("height",300);
var padding=10;
var baseHight=30;
var margin=5;
svg.selectAll("rect")
.data(dataSource)
.enter()
.append("rect")
.attr("x",padding)
.attr("y",function(d,i){
return i*(baseHight+margin);
})
.attr("width",function(d){
return linear(d);//比例尺使用
})
.attr("height",baseHight)
.attr("fill",function(d){
if(linear(d)>50)return "red";
else return "blue";
});
</script>
</body>
</html>
序數比例尺：d3.scale.ordinal()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>比例尺</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script >
var dataSource=[10,100,30,50,130];
var linear=d3.scale.linear()//獲得線性比例尺
.domain([0,d3.max(dataSource)])//設置定義域
.range([0,100]);//設置值域
<strong>var source=[1,2,3];
var show=["yellow","green","red"];
var ordinal=d3.scale.ordinal()
.domain(source)
.range(show);</strong>
var svg=d3.select("body")
.append("svg")
.attr("width",400)
.attr("height",300);
var padding=10;
var baseHight=30;
var margin=5;
svg.selectAll("rect")
.data(dataSource)
.enter()
.append("rect")
.attr("x",padding)
.attr("y",function(d,i){
return i*(baseHight+margin);
})
.attr("width",function(d){
return linear(d);
})
.attr("height",baseHight)
.attr("fill",function(d){
<strong>if(linear(d)<30)return ordinal(1);
else if(linear(d)<60)return ordinal(2);
else return ordinal(3);</strong>
});
</script>
</body>
</html>