D3.js庫-6-比例尺的使用
比例尺在D3中是一個非常實用的工具，可以這樣理解比例尺：的關(guān)系握童，從
domain映射到range醇王。因為在建立比例尺的過程中會經(jīng)常使用到兩個函數(shù)：domain()和range()。本文中介紹兩種常用的比例尺
線性比例尺
scaleLinear序數(shù)比例尺
scaleOrdinal
線性比例尺scaleLinear
在線性比例尺中慎式，domain和range都是連續(xù)變化的抹缕。關(guān)系類似于線性函數(shù)
image
代碼解釋：
var scaleLinear = d3.scaleLinear()
.domain([min,max])
.range([0,300]);
表示將數(shù)據(jù)從[0.9,5]映射到了[0,300]之間，定義的變量scaleLinear好比是一個函數(shù)墨辛，能夠直接傳入?yún)?shù)進行計算
注意在D3中如何進行換行操作
序數(shù)比例尺scaleOrdinal()
domain和range都是離散化的卓研，可以說都是數(shù)組的形式，不是連續(xù)的
同樣的，在定義了比例尺之后奏赘，可以當(dāng)做函數(shù)來使用寥闪，傳入?yún)?shù)
image
<script>
// 離散化比例尺
var index = [0,1,2,3,4];
var color = ["red","blue","yellow","black","green"];
var scaleOrdinal = d3.scaleOrdinal()
.domain(index) //將index中的值和color中的顏色一一對應(yīng)
.range(color);
document.write("scaleOrdinal(1)輸出："+scaleOrdinal(1));
d3.select("body").append("br");//換行
document.write("scaleOrdinal(2)輸出："+scaleOrdinal(2));
d3.select("body").append("br");
document.write("scaleOrdinal(4)輸出："+scaleOrdinal(4));
</script>
比例尺作圖
利用線性比例尺來做柱狀圖
<body>
<svg width="960" height="600"></svg>
<script>
// 定義畫布邊距、數(shù)組
var marge = {top:60,bottom:60,left:60,right:60}
var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
//定義一個線性比例尺
var scaleLinear = d3.scaleLinear()
.domain([0,d3.max(dataset)]) //指定domain和range
.range([0,300]);
var svg = d3.select("svg"); // 選擇元素
var g = svg.append("g") // 指定分組
.attr("transform", "translate("+marge.top+","+marge.left+")");
var rectHeight = 30;
g.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", 20)
.attr("y",function(d,i){
return i * rectHeight;
})
.attr("width",function(d){
return scaleLinear(d); // 使用比例尺
})
.attr("height", rectHeight-5)
.attr("fill","red")
</script>
</body>
image
利用比例尺加上刻度線來作圖
<body>
<script>
// 定義畫布大小和數(shù)組
var dataArray = [5, 40, 50, 60];
var width = 500;
var height = 500;
//定義線性比例尺
var widthScale = d3.scaleLinear() // D3 v4之后不再使用該寫法磨淌，請用d3.scaleLinear()
.domain([0,60])
.range([0,width]);
// 定義顏色的漸變比例尺
var color = d3.scaleLinear()
.domain([0,60])
.range(['red', 'blue']);
var axis = d3.axisBottom(widthScale) // 定義一個axis疲憋，方向朝下，10個刻度
.ticks(10);
// 定義畫布（代碼記琢褐弧）
var svg = d3.select('body')
.append('svg') // 追加一個svg元素
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', 'translate(20,0)')
.call(axis); // 最終調(diào)用axis刻度
var bars = svg.selectAll('rect') // 選擇svg中的全部矩形
.data(dataArray) // 綁定數(shù)組
.enter() // 指定選擇集的enter部分
.append('rect') // 添加足夠數(shù)量的矩形元素
.attr('x', 20) // 距離原點的距離缚柳，默認(rèn)是0
.attr('width',function(d) {return widthScale(d);})
.attr('height',50)
.attr('fill',function(d) { return color(d); }) // 填充顏色改變
.attr('y',function(d,i){ return i * 100 }); // d表示被綁定的數(shù)據(jù)，i是索引號
svg.append('g')
.attr("transform", "translate(0,400)")
.call(axis);
</script>
</body>
image
