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詳解