d3入門篇(三):比例尺座標軸

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

比例尺

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

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

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

示例dom

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

完整示例svg

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")

結果
clipboard.png
結果顯示,數據集被比例尺進行縮放(scale)可視化出來。 d3還提供不少數據處理的方法,max min extent sum median mean shuffle等等。函數

座標軸

要定義座標軸,主要兩個步驟:
(1)定義座標軸的比例尺;
(2)定義座標軸朝向,刻度;

示例spa

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);

結果code

clipboard.png
補充知識點orm

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") ) ;
相關文章
相關標籤/搜索