d3入門篇（三）：比例尺坐標軸

tomato 發布于2019-08-23 14:03 / 1860人閱讀

摘要：為了根據顯示刻度靈活變化寬高，而不是定死，特別是數據差異性很大的時候，我們希望圖表顯示范圍都在畫布里面，這時就會引入比例尺的概念來進行縮放。根據這些規則，會為我們返回一個比例尺函數。

這篇文章繼續介紹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是我們定義的一個坐標軸，其實它本身也是一個函數，將新建的分組傳給yAxis()函數，用以繪制，
所以這句代碼等價于yAixs (g.append("g") ) ;

GPU云服務器云服務器入門篇 ASPNET入門數據篇機器人制作入門篇三分鐘入門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100023.html

d3入門篇（四）：繪制完整柱狀圖添加過渡效果

摘要：這篇學習筆記是入門篇的最后一部分，將前幾篇的內容整合到一起，繪制帶過渡效果的柱狀圖，這次先給大家看一下結果圖。這篇學習筆記是入門篇的最后一部分，將前幾篇的內容整合到一起，繪制帶過渡效果的柱狀圖，這次先給大家看一下結果圖。結果 showImg(https://segmentfault.com/img/bVblfGG?w=1230&h=1210); 前言先放結果圖是想反饋一下在整合基...

Jason 2019-08-23 14:08 評論0 收藏0
交互式數據可視化－D3.js（三）比例尺

摘要：設置為，則所有超出值域范圍的值，都會被收縮到值域之內。指數比例尺相對線性比例尺多出一個用于指定指數。這段代碼中相當于定義一個線性比例尺。使用量子比例尺后定義域將被分成這段，分別對應值域的個值。線性比例尺線性比例尺是常用比例尺常用方法有： var linear = d3.scaleLinear() - 創建一個定量的線性比例尺. linear.domain([numbers]) - ...

huhud 2019-08-02 11:54 評論0 收藏0
交互式數據可視化－D3.js（三）比例尺

摘要：設置為，則所有超出值域范圍的值，都會被收縮到值域之內。指數比例尺相對線性比例尺多出一個用于指定指數。這段代碼中相當于定義一個線性比例尺。使用量子比例尺后定義域將被分成這段，分別對應值域的個值。線性比例尺線性比例尺是常用比例尺常用方法有： var linear = d3.scaleLinear() - 創建一個定量的線性比例尺. linear.domain([numbers]) - ...

graf 2019-08-23 12:42 評論0 收藏0
d3.js 使用坐標軸

摘要：本片記錄坐標軸入門，使用版本如何實現坐標軸生成的坐標圖是通過的路徑元素元素組成的，如下圖表示的是底部坐標軸不包括內部刻度，如下這部分通過描繪，在中稱為容器則包括了和作為即線，即文字實現坐標軸主要步驟步驟主要如下創建比例尺創建坐標軸，是個函數本片blog記錄d3坐標軸入門，使用版本v5.9.2 SVG如何實現坐標軸 d3生成的坐標圖是通過svg的path(路徑)元素 + g + lin...

Karuru 2019-08-23 16:43 評論0 收藏0
d3.js 創建完整柱形圖

摘要：之前只是各個部分的，現在將各部分整合起來，發現還是學到了不少東西主要是加深了對比例尺的理解代碼樣式及數據樣式接著是數據及柱狀圖寬高等留白用創建比例尺實踐之后對比例尺與坐標軸的理解加深了一點軸使用線性比例尺，注意輸入域軸使用比例尺用于柱形 d3js.org v5.9.2 之前只是各個部分的demo，現在將各部分整合起來，發現還是學到了不少東西主要是加深了對scale（比例尺）的理解...

snowLu 2019-08-23 16:44 評論0 收藏0