D3.js --- 刻度 ticks()总结

D3.js --- 刻度 ticks()总结

绿萝小仙女关注

2019.05.09 10:27:09字数 68阅读 1,335

刻度: 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)