這篇文章繼續介紹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")
結果
結果顯示,數據集被比例尺進行縮放(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
補充知識點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") ) ;