d3比例尺座標軸

這篇文章繼續介紹d3的基礎知識

比例尺

在繪製柱狀圖時，我們往往會定義很大的畫布，然而我們要可視化的數據確很小，這時會出現很多留白
的情況。爲了根據顯示刻度靈活變化寬高，而不是定死，特別是數據差異性很大的時候，我們希望圖表
顯示範圍都在畫布裏面，這時就會引入**比例尺**的概念來進行縮放（scale）。

我們在數學裏有函數的概念y=f(x),定義域爲x（輸入）的取值範圍，值域爲y（輸出）的取值範圍。輸
入x,根據函數規則會輸出一個y。

d3中的比例尺與數學中的函數類似，首先我們需要指定函數類別，即比例尺的類別，如scaleLinear，
scalePow, scaleQuantise, scaleOrdinal, scaleSqrt, scaleLog, scaleSequential等等。
然後我們需要給定函數的定義域domain([])，最後需要給定函數的值域range([])。根據這些規則，
d3會爲我們返回一個比例尺**函數**。

示例

var linearScale=d3.scaleLinear()
.domain([0,d3.max(dataset,function (d) {
    return d;
})])
.range([0,height]);
//這裏linearScale爲一個函數，我們可直接執行linearScale(d)

完整示例

import * as d3 from "d3";
var width=300;//svg畫布寬
var height=200;//svg畫布高
var rectWidth=30;//每個矩形的默認寬度
var dataset=[45,70,12,79,4,127,33,90];
//定義畫布
var svg=d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height)
.style("background-color","yellow");
//定義比例尺
var linearScale=d3.scaleLinear()
.domain([0,d3.max(dataset,function (d) {
    return d;
})])
.range([0,height]);
//綁定數據集 繪製柱形圖
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("width",rectWidth-2)
.attr("height",function (d,i) {
     return linearScale(d)
})
.attr("x",function (d,i) {
      return rectWidth*i
})
.attr("y",200)
.attr("transform",function (d,i) {
    return `translate(0,${linearScale(-d)})`
})
.attr("fill","blue")

結果

結果顯示，數據集被比例尺進行縮放（scale）可視化出來。 d3還提供很多數據處理的方法，max min extent sum median mean shuffle等等。

座標軸

要定義座標軸，主要兩個步驟：
（1）定義座標軸的比例尺；
（2）定義座標軸朝向，刻度；

示例

import * as d3 from "d3";

var width = 300;//svg畫布寬
var height = 200;//svg畫布高
var dataset = [45, 70, 12, 79, 4, 127, 33, 150];
var testDataset = [4.5, 7.0, 1.2, 7.9, 0.4, 12.7, 3.3, 9.0];
var rectWidth = 30;//每個矩形的默認寬度
//定義畫布
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.style("background-color", "yellow");
//定義矩形比例尺
var linearScale = d3.scaleLinear()
.domain([0, d3.max(dataset, function (d) {
    return d;
})])
.range([0, 200]);

var g = svg.append("g")
.attr("transform", "translate(40,0)");

g.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("width", rectWidth - 2)
.attr("height", function (d, i) {
    return linearScale(d)
})
.attr("x", function (d, i) {
    return rectWidth * i
})
.attr("y", 200)
.attr("transform", function (d, i) {
    return `translate(0,${linearScale(-d)})`
})
.attr("fill", "blue");
//定義座標軸比例尺
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, function (d) {
    return d;
})])
.range([200,0]);
//定義座標軸
var yAxis = d3.axisLeft(yScale)
.ticks(5);
//調用座標軸
g.append("g")
.attr("transform", `translate(0,0)`)
.call(yAxis);

結果

補充知識點

1.“g”標籤
g標籤是svg的常用標籤，相當於一個容器標籤，把相關元素進行組合。通過g標籤組合在一起的元素，可以
通過g標籤設置屬性等，進行座標變換等操作，如attr("transform","translate()"),進行元素平移；
2.定義座標軸
    var yAxis = d3.axisLeft(yScale)
    .ticks(5);
首先需要設置座標軸的朝向，這裏是向左，將座標軸的比例尺作爲參數傳入axisLeft中；
通過ticks設置刻度的數目（不過好像並沒有什麼用處）
3.call（）
    g.append("g")
    .attr("transform", `translate(0,0)`)
    .call(yAxis);
yAxis是我們定義的一個座標軸，其實它本身也是一個函數，將新建的分組<g>傳給yAxis()函數，用以繪製，
所以這句代碼等價於yAixs (g.append("g") ) ;