d3.js 使用坐標軸

Karuru 發布于2019-08-23 16:43 / 2086人閱讀

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

本片blog記錄d3坐標軸入門，使用版本v5.9.2

SVG如何實現坐標軸

d3生成的坐標圖是通過svg的path(路徑)元素 + g + line + text元素組成的，如下圖

path表示的是底部坐標軸（不包括內部刻度），如下

這部分通過d描繪，在d3中稱為outer tick

g容器則包括了text和line作為inner tick

line即線，text即文字

d3實現坐標軸主要步驟

步驟主要如下：

創建scale（比例尺）

創建axis（坐標軸，是個函數）

selection.call(axis)創建坐標軸

小實驗 數據與寬高

const data = [1, 10, 20];
let svgWidth = 400,
    svgHeight = 400;

小實驗都用這些數據啦

最簡單的坐標軸

/**
 * 創建scale
 */
let scale = d3.scaleLinear()
    .domain([0, d3.max(data)]) //輸入域
    .range([0, 200]); //輸出域，這里可理解為坐標軸長度范圍
/**
 * 創建axis
 */
let axis = d3.axisTop(scale); //創建坐標軸，除此之外還有axisLeft，axisBottom，axisRight，區別在于tick（刻度）的朝向
/**
 * 插入
 */
d3.select("body")
    .append("svg")
    .attr("width", svgWidth)
    .attr("height", svgHeight)
    .append("g")//需要放在g容器里
    .attr("transform", "translate(10,20)")
    .call(axis);//創建坐標軸

坐標軸的長度來源于比例尺的range
最大值來源于d3.max(data)
200(range) / 20(最大值) = 10段
20(最大值） / 10段 = 2
所以坐標軸如是顯示

僅顯示所需的刻度的坐標軸

上一個坐標軸顯示了平均的刻度，但是有時這不是我們想要的，我們可以使用axis.tickValues()顯示需要的刻度
僅需在axis后增加api即可

let axis = d3.axisTop(scale).tickValues(data);

設置刻度長短

也是使用axis.tickSize()即可，為方便觀察，這里使用axisBottom坐標軸

let axis = d3.axisBottom(scale).tickValues(data).tickSize(200);

設置樣式

其實設置樣式就是對其中的svg設置，原理類似dom操作，選擇svg元素，改變樣式

舉個簡單的例子

d3.select("body")
    .append("svg")
    .attr("width", svgWidth)
    .attr("height", svgHeight)
    .append("g")
    .attr("transform", "translate(10, 20)")
    .call(axis)
    .selectAll("path").attr("stroke", "pink").attr("stroke-width", "5");

最后對g中的path進行賦樣式

總結

組合好不同的API會有更多效果！

參考資料

d3.js直方圖與坐標軸基礎
d3.js API
selection.call()
d3中的axis.ticks詳解

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

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

交互式數據可視化－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 ---畫坐標軸

摘要：畫坐標軸使用的的方法生成坐標軸頁面效果如下這個時候軸在頁面的上方，不在我們想要的位置，可以通過設置屬性將坐標軸移到自己想要的位置畫軸效果如下，這個時候軸在頁面的上方，不在我們想要的位置，所以要讓軸旋轉軸旋轉代碼加上旋轉后的效果圖如下會發現軸畫坐標軸 //使用d3的svg的axis()方法生成坐標軸 var x_axis = d3.svg.axis().scale(scale_x), ...

zzzmh 2019-08-02 15:59 評論0 收藏0
d3.js ---畫坐標軸

摘要：畫坐標軸使用的的方法生成坐標軸頁面效果如下這個時候軸在頁面的上方，不在我們想要的位置，可以通過設置屬性將坐標軸移到自己想要的位置畫軸效果如下，這個時候軸在頁面的上方，不在我們想要的位置，所以要讓軸旋轉軸旋轉代碼加上旋轉后的效果圖如下會發現軸畫坐標軸 //使用d3的svg的axis()方法生成坐標軸 var x_axis = d3.svg.axis().scale(scale_x), ...

ygyooo 2019-08-21 17:56 評論0 收藏0
d3.js 創建完整柱形圖

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

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