d3.js 使用座標軸

本片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實現座標軸主要步驟

步驟主要以下：

1. 建立scale（比例尺）
2. 建立axis（座標軸，是個函數）
3. 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詳解