D3 数据可视化——自定义刻度 ticks

🔯 首先创建一个绘制图形的 svg 

let height = 300, width = 300, margin = 30,
    axisWidth = width - 2 * margin,
    svg;


svg = d3.select('#d3Container').append('svg')
                .attr('width', width)
                .attr('height', height)
                .style('background-color', 'pink')


// HTML
<div id="d3Container" class="container"></div>

// CSS
.container {
    font-size: 20px;
    width: 50vw;
    height: 650px;
    margin:auto;
    background-color: #fbe9d5;
}

🔯 接着声明一个线性尺度 d3.scaleLinear().domain().range()

let axisWidth = width - 2 * margin
const scaleObj = d3.scaleLinear().domain([0, 1]).range([0, axisWidth])

其中 axisWidth 等于 绘制容器Svg的宽度减去两边的间距。避免轴的长度大于绘图区域导致遮挡。

 🔯 最后创建一个坐标轴并加载到 svg 中的 g 元素里

const axisObj = d3.axisBottom()
                        .scale(scaleObj)
                        .ticks(10)
                        .tickSize(12)
                        .tickPadding(10)
                        .tickFormat(d3.format('.0%'))
    svg.append('g')
        .attr('transform', () => {
            return 'translate(' + margin + ',' + margin + ')'
        }).call(axisObj)

•  ticks(10) 代表有十格刻度

•  tickSize(12) 定义刻度的大小，默认是 6px

•  tickPadding(10) 标签数字与坐标轴的距离

•  tickFormat(d3.format('.0%'))  给标签数字添加%，tickFormat 接收函数可以自定义标签
   tickFormat((v) => do Something)

改变上诉三个属性