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