刻度: ticks() 河爹、tickSize() 、tickPadding()产舞、 tickFormat()
- ticks(10) 設置刻度的個數(shù)為10
- tickSize(12) 設置刻度的長度為12px,默認6px
- tickPadding(12) 設置刻度與數(shù)值之間的間隙為12px
- tickFormat(d3.format(".0%")) 設置刻度下的數(shù)值的格式
圖解
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) //控制坐標軸上的刻度個數(shù)
.tickSize(10) //控制刻度的大小
.tickPadding(5) //設置標簽數(shù)字與坐標軸的距離
.tickFormat(d3.format(".0%")) //設置標簽數(shù)字的格式
svg.append("g").attr("transform", "translate(" + padding.left + ", " + padding.bottom + ")")
.attr("class","axis")
.call(axis)
