轴将比例尺渲染成更可读的标记。提供了四个方向的轴：

• d3.axisTop(scale)
• d3.axisRight(scale)
• d3.axisBottom(scale)
• d3.axisLeft(scale)

以下为含有坐标轴的柱状图代码示例：

<script src="https://d3js.org/d3.v6.min.js"></script>
<div id="view011001"></div>
<script>
    height = 500;
    width = 500;
    // 定义svg内边距
    padding = { top: 50, right: 50, bottom: 50, left: 50 };
    // 矩形之间的间隙
    rectPadding = 20;
    // 柱状图数据
    data = [ 20, 43, 120, 87, 99, 167, 142 ];

    // 为坐标轴定义一个X轴的线性比例尺
    xScale = d3.scaleBand()
       .domain( d3.range(data.length) )
       .rangeRound( [0, width-padding.left-padding.right] )
    // 使用给定的 xScale 构建一个刻度在下的X坐标轴          
    xAxis = d3.axisBottom( xScale );

    // 为坐标轴定义一个y轴的线性比例尺
    yScale = d3.scaleLinear()
       .domain( [0, d3.max( data )] )
       .range( [height-padding.top-padding.bottom, 0 ] )
       .nice()
    // 使用给定的 yScale 构建一个刻度在左的y坐标轴             
    yAxis = d3.axisLeft( yScale )
    
    svg = d3.select("#view011001")
        .append("svg")
        .attr("width", width)
        .attr("height", height)

    // 在svg画布中特定位置放置X轴
    svg.append( "g" )
       .attr( "transform", "translate( "+ padding.left +", "+ (height - padding.bottom) +" )" )
       .call( xAxis )
    // 在svg画布中特定位置放置Y轴    
    svg.append( "g" )
       .attr( "transform", "translate( "+ padding.left +", "+ padding.top +" )" )
       .call( yAxis )

    // 根据数据生成相应柱状矩形
    rect = svg.append( "g" )
        .selectAll( "rect" )  // 获取空选择集
        .data( data )  // 绑定数据
        .enter()      // 获取enter部分，因为此时页面上其实是没有rect元素的，获取的是空选择集，此时就要在enter部分上进行操作
        .append( "rect" ) // 根据数据个数插入相应数量的rect元素
        .attr( "fill", "#377ade" )  
        .attr( "x", function( d, i ){     // 设置每个柱状矩形的x坐标，为左内边距 + X轴定义域值对应的值域的值 + 矩形间隙
            return padding.left + xScale(i) + rectPadding/2;
        } )
        .attr( "y", function( d, i ){     // 设置每个柱状矩形的y坐标
            return yScale(d) + padding.top;
        } )
        .attr( "width", xScale.step()-rectPadding )   // 设置每个柱状矩形的宽度
        .attr( "height", function( d, i ){   // 设置每个柱状矩形的高度，svg高度 - 上下内边距 - Y轴定义域值对应的值域的值
            return height-padding.bottom-padding.top-yScale(d);
        } )
</script>

坐标轴

关于代码运行效果

由于在简书上不能展示代码的运行结果，我在网上搭建了一个 jupyter notebook http://jupyter.cyber-life.cn/lab，我将本套教程的笔记和源代码写在了上面，可以在线查看代码运行效果，还可以调试代码，有需要的同学私信我。