亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

d3入門篇（三）：比例尺坐標(biāo)軸

tomato / 1982人閱讀

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

這篇文章繼續(xù)介紹d3的基礎(chǔ)知識(shí)

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

我們?cè)跀?shù)學(xué)里有函數(shù)的概念y=f(x),定義域?yàn)閤（輸入）的取值范圍，值域?yàn)閥（輸出）的取值范圍。輸
入x,根據(jù)函數(shù)規(guī)則會(huì)輸出一個(gè)y。

d3中的比例尺與數(shù)學(xué)中的函數(shù)類似，首先我們需要指定函數(shù)類別，即比例尺的類別，如scaleLinear，
scalePow, scaleQuantise, scaleOrdinal, scaleSqrt, scaleLog, scaleSequential等等。
然后我們需要給定函數(shù)的定義域domain([])，最后需要給定函數(shù)的值域range([])。根據(jù)這些規(guī)則，
d3會(huì)為我們返回一個(gè)比例尺**函數(shù)**。

示例

var linearScale=d3.scaleLinear()
.domain([0,d3.max(dataset,function (d) {
    return d;
})])
.range([0,height]);
//這里linearScale為一個(gè)函數(shù)，我們可直接執(zhí)行l(wèi)inearScale(d)

完整示例

import * as d3 from "d3";
var width=300;//svg畫布寬
var height=200;//svg畫布高
var rectWidth=30;//每個(gè)矩形的默認(rèn)寬度
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]);
//綁定數(shù)據(jù)集 繪制柱形圖
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")

結(jié)果

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

坐標(biāo)軸 
要定義坐標(biāo)軸，主要兩個(gè)步驟：
（1）定義坐標(biāo)軸的比例尺；
（2）定義坐標(biāo)軸朝向，刻度；

示例

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;//每個(gè)矩形的默認(rèn)寬度
//定義畫布
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");
//定義坐標(biāo)軸比例尺
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, function (d) {
    return d;
})])
.range([200,0]);
//定義坐標(biāo)軸
var yAxis = d3.axisLeft(yScale)
.ticks(5);
//調(diào)用坐標(biāo)軸
g.append("g")
.attr("transform", `translate(0,0)`)
.call(yAxis);

結(jié)果


補(bǔ)充知識(shí)點(diǎn)

1.“g”標(biāo)簽
g標(biāo)簽是svg的常用標(biāo)簽，相當(dāng)于一個(gè)容器標(biāo)簽，把相關(guān)元素進(jìn)行組合。通過g標(biāo)簽組合在一起的元素，可以
通過g標(biāo)簽設(shè)置屬性等，進(jìn)行坐標(biāo)變換等操作，如attr("transform","translate()"),進(jìn)行元素平移；
2.定義坐標(biāo)軸
    var yAxis = d3.axisLeft(yScale)
    .ticks(5);
首先需要設(shè)置坐標(biāo)軸的朝向，這里是向左，將坐標(biāo)軸的比例尺作為參數(shù)傳入axisLeft中；
通過ticks設(shè)置刻度的數(shù)目（不過好像并沒有什么用處）
3.call（）
    g.append("g")
    .attr("transform", `translate(0,0)`)
    .call(yAxis);
yAxis是我們定義的一個(gè)坐標(biāo)軸，其實(shí)它本身也是一個(gè)函數(shù)，將新建的分組傳給yAxis()函數(shù)，用以繪制，
所以這句代碼等價(jià)于yAixs (g.append("g") ) ;

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/100023.html

相關(guān)文章

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

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

    Jason 評(píng)論0 收藏0

  • 交互式數(shù)據(jù)可視化－D3.js（三）比例尺

    摘要：設(shè)置為，則所有超出值域范圍的值，都會(huì)被收縮到值域之內(nèi)。指數(shù)比例尺相對(duì)線性比例尺多出一個(gè)用于指定指數(shù)。這段代碼中相當(dāng)于定義一個(gè)線性比例尺。使用量子比例尺后定義域?qū)⒈环殖蛇@段，分別對(duì)應(yīng)值域的個(gè)值。 線性比例尺 線性比例尺是常用比例尺常用方法有： var linear = d3.scaleLinear() - 創(chuàng)建一個(gè)定量的線性比例尺. linear.domain([numbers]) - ...

    huhud 評(píng)論0 收藏0

  • 交互式數(shù)據(jù)可視化－D3.js（三）比例尺

    摘要：設(shè)置為，則所有超出值域范圍的值，都會(huì)被收縮到值域之內(nèi)。指數(shù)比例尺相對(duì)線性比例尺多出一個(gè)用于指定指數(shù)。這段代碼中相當(dāng)于定義一個(gè)線性比例尺。使用量子比例尺后定義域?qū)⒈环殖蛇@段，分別對(duì)應(yīng)值域的個(gè)值。 線性比例尺 線性比例尺是常用比例尺常用方法有： var linear = d3.scaleLinear() - 創(chuàng)建一個(gè)定量的線性比例尺. linear.domain([numbers]) - ...

    graf 評(píng)論0 收藏0

  • d3.js 使用坐標(biāo)軸

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

    Karuru 評(píng)論0 收藏0

  • d3.js 創(chuàng)建完整柱形圖

    摘要：之前只是各個(gè)部分的，現(xiàn)在將各部分整合起來，發(fā)現(xiàn)還是學(xué)到了不少東西主要是加深了對(duì)比例尺的理解代碼樣式及數(shù)據(jù)樣式接著是數(shù)據(jù)及柱狀圖寬高等留白用創(chuàng)建比例尺實(shí)踐之后對(duì)比例尺與坐標(biāo)軸的理解加深了一點(diǎn)軸使用線性比例尺，注意輸入域軸使用比例尺用于柱形 d3js.org v5.9.2 之前只是各個(gè)部分的demo，現(xiàn)在將各部分整合起來，發(fā)現(xiàn)還是學(xué)到了不少東西 主要是加深了對(duì)scale（比例尺）的理解...

    snowLu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

tomato

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<