資訊專欄INFORMATION COLUMN
摘要：折線圖，散點(diǎn)圖經(jīng)常采用這種樣式的坐標(biāo)軸。軸使用和來(lái)控制刻度顯示在坐標(biāo)軸的上方或者下方。北京上海廣州深圳軸表現(xiàn)形式基本上，柱狀圖都會(huì)采用這種坐標(biāo)軸。而繪制折線圖，散點(diǎn)圖等等又需要采用這種表現(xiàn)形式，所以這種方法是比較常用的。
該文只使用d3.jsV4版本進(jìn)行繪制，不關(guān)注V3版本，我們要與時(shí)俱進(jìn)。
在繪制圖表的過(guò)程中，直坐標(biāo)系是繞不開(kāi)的一個(gè)問(wèn)題，直方圖，折線圖，散點(diǎn)圖等等都需要使用到直坐標(biāo)系。而其中最關(guān)鍵的是x軸的繪制，因?yàn)閥軸基本上都是數(shù)值顯示。如何用代碼實(shí)現(xiàn)，x軸的表現(xiàn)形式是什么，這是本文主要討論的問(wèn)題。
1 連續(xù)性x坐標(biāo)軸 1.1 從零開(kāi)始的連續(xù)性x坐標(biāo)軸什么是從零開(kāi)始，就是從繪制的坐標(biāo)軸的最左端開(kāi)始顯示第一個(gè)刻度。折線圖，散點(diǎn)圖經(jīng)常采用這種樣式的x坐標(biāo)軸。
let height = 400
let width = 600
let x = d3.scaleLinear().range([0, width])
let xScale = x.domain([0, 10])
// x軸
let xAxis = svg.append("g")
.attr("class", "xAxis")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(xScale))
使用d3.axisTop和d3.axisBottom()來(lái)控制刻度顯示在坐標(biāo)軸的上方或者下方。
表現(xiàn)形式：
1.2 不從零開(kāi)始的連續(xù)性x坐標(biāo)軸情況比較少，基本不用，所以不作闡述。
1.3 時(shí)間型x坐標(biāo)軸時(shí)間軸也是線性的，所以將它歸為此類。
let height = 400
let width = 600
let x = d3.scaleTime().range([0, width])
let xScale = x.domain([new Date(2017, 1), new Date(2017, 6)])
// x軸
let xAxis = svg.append("g")
.attr("class", "xAxis")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(xScale))
表現(xiàn)形式：
2 非連續(xù)性x坐標(biāo)軸 2.1 不從零開(kāi)始的非連續(xù)性x坐標(biāo)軸先從不從零開(kāi)始說(shuō)起，因?yàn)檫@個(gè)用法比較正常。關(guān)鍵是使用d3.scaleBand()。
let height = 400
let width = 600
let x = d3.scaleBand().range([0, width])
let xScale = x.domain(["北京", "上海", "廣州", "深圳"])
// x軸
let xAxis = svg.append("g")
.attr("class", "xAxis")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(xScale))
表現(xiàn)形式：
基本上，柱狀圖都會(huì)采用這種x坐標(biāo)軸。
2.2 從零開(kāi)始的非連續(xù)性x坐標(biāo)軸使用d3.scaleOrdinal()
let height = 400
let width = 600
let x = d3.scaleOrdinal().range([150, 300, 450, 600])
let xScale = x.domain(["北京", "上海", "廣州", "深圳"])
// x軸
let xAxis = svg.append("g")
.attr("class", "xAxisis")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(xScale))
表現(xiàn)形式：
在正常情況中，x軸的數(shù)據(jù)經(jīng)常是非線性的。而繪制折線圖，散點(diǎn)圖等等又需要采用這種表現(xiàn)形式，所以這種方法是比較常用的。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/85026.html
摘要：這篇學(xué)習(xí)筆記是入門(mén)篇的最后一部分，將前幾篇的內(nèi)容整合到一起，繪制帶過(guò)渡效果的柱狀圖，這次先給大家看一下結(jié)果圖。 這篇學(xué)習(xí)筆記是入門(mén)篇的最后一部分，將前幾篇的內(nèi)容整合到一起，繪制帶過(guò)渡效果的柱狀圖，這次先給大家看一下結(jié)果圖。 結(jié)果 showImg(https://segmentfault.com/img/bVblfGG?w=1230&h=1210); 前言 先放結(jié)果圖是想反饋一下在整合基...
摘要：如其中，和表示繪制區(qū)域的寬高，表示版本號(hào)。下面分別是繪制一個(gè)多邊形和折線路徑標(biāo)簽功能最豐富，以上圖形都可以使用路徑制作出來(lái)，用法與折線類似給出一個(gè)坐標(biāo)點(diǎn)在坐標(biāo)前添加一個(gè)英文字母，表示如何運(yùn)動(dòng)到此坐標(biāo)點(diǎn)點(diǎn)。英文字符按照功能分為五類。 在D3中會(huì)穿插SVG 方便大家對(duì)D3對(duì)使用 SVG簡(jiǎn)介 可縮放矢量圖(scalabel vector graphics)，是用于描述二維矢量圖形的一種圖形格...
摘要：為了根據(jù)顯示刻度靈活變化寬高，而不是定死，特別是數(shù)據(jù)差異性很大的時(shí)候，我們希望圖表顯示范圍都在畫(huà)布里面，這時(shí)就會(huì)引入比例尺的概念來(lái)進(jìn)行縮放。根據(jù)這些規(guī)則，會(huì)為我們返回一個(gè)比例尺函數(shù)。 這篇文章繼續(xù)介紹d3的基礎(chǔ)知識(shí) 比例尺 在繪制柱狀圖時(shí)，我們往往會(huì)定義很大的畫(huà)布，然而我們要可視化的數(shù)據(jù)確很小，這時(shí)會(huì)出現(xiàn)很多留白 的情況。為了根據(jù)顯示刻度靈活變化寬高，而不是定死，特別是數(shù)據(jù)差異性很大的...
摘要：引入庫(kù)聲明一個(gè)數(shù)組，包含若干單詞用創(chuàng)建元素用為變量賦值刪除文件中相關(guān)的元素和文件中相關(guān)的變量。把數(shù)組元素改為愛(ài)在各種語(yǔ)言的單詞愛(ài)最后，為第個(gè)單詞設(shè)置特殊的文字樣式大功告成 showImg(https://segmentfault.com/img/bVbfwGW?w=400&h=303); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。 https://cod...
閱讀 2233·2021-09-23 11:52
閱讀 1899·2021-09-02 15:41
閱讀 3018·2019-08-30 10:47
閱讀 1984·2019-08-29 17:14
閱讀 2337·2019-08-29 16:16
閱讀 3192·2019-08-28 18:29
閱讀 3418·2019-08-26 13:30
閱讀 2610·2019-08-26 10:49
