刻度: ticks() 、tickSize() 、tickPadding()、 tickFormat()
- ticks(10) 设置刻度的个数为10
- tickSize(12) 设置刻度的长度为12px,默认6px
- tickPadding(12) 设置刻度与数值之间的间隙为12px
- tickFormat(d3.format(".0%")) 设置刻度下的数值的格式
图解
ticks.png
const svgWidth = 400
const svgHeight = 400
const padding = {top:20,bottom:20,left:40,right:40}
const xAxisLength = svgWidth-padding.left-padding.right
const svg = d3.select(".learn-tick")
.append("svg")
.attr("width",svgWidth)
.attr("height",svgHeight)
const scale = d3.scaleLinear()
.domain([0,1])
.range([0,xAxisLength])
const axis = d3.axisBottom(scale)
.ticks(5) //控制坐标轴上的刻度个数
.tickSize(10) //控制刻度的大小
.tickPadding(5) //设置标签数字与坐标轴的距离
.tickFormat(d3.format(".0%")) //设置标签数字的格式
svg.append("g").attr("transform", "translate(" + padding.left + ", " + padding.bottom + ")")
.attr("class","axis")
.call(axis)
