在网络浏览器中打开以下文件的本地副本：

代码略

首先让我们看一下以下代码示例：

代码略

前面的代码仅在下面的屏幕快照中显示了四个按钮，从而产生了可视输出。 当您单击水平底部时，它将显示以下内容：

横轴

以下屏幕截图显示了单击垂直右按钮时的外观：

纵轴

本方法的第一步是创建svg元素，该元素将用于渲染我们的轴。 这是使用在行A上定义的createSvg函数以及在行B和C上显示的D3附加和attr修饰符函数完成的。

让我们看一下如何在以下代码片段中创建SVG画布：

var height = 500,  
  width = 500,  
  margin = 25, 
  offset = 50, 
  axisWidth = width - 2 * margin, 
  svg; 
     
function createSvg(){ // <-A 
     svg = d3.select('body').append('svg') // <-B 
        .attr('class', 'axis') // <-C 
        .attr('width', width) 
        .attr('height', height); 
}  

现在，我们准备在此svg画布上渲染轴。 renderAxis函数旨在完全做到这一点。 在D行上，我们首先使用给定的D3轴生成器函数创建一个Axis组件。 D3版本4.x附带有四个内置的轴生成器，用于不同的方向。 方向告诉D3如何放置给定的轴，以及如何渲染它。 例如，无论是水平还是垂直。 D3开箱即用支持的四个轴方向如下：

• d3.axisTop：水平轴，标签置于轴的顶部
• d3.axisBottom：水平轴，标签位于轴的底部
• d3.axisLeft：垂直轴，标签放置在该轴的左侧
• d3.axisRight：垂直轴，标签位于该轴的右侧

您可以在下面的代码片段中看到，当您单击指定的按钮时，这些确实是传递给renderAll函数的函数：

<div class='control-group'> 
    <button onclick='renderAll(d3.axisBottom)'> 
        horizontal bottom 
    </button> 
    <button onclick='renderAll(d3.axisTop)'> 
        horizontal top 
    </button> 
    <button onclick='renderAll(d3.axisLeft)'> 
        vertical left 
    </button> 
    <button onclick='renderAll(d3.axisRight)'> 
        vertical right 
    </button> 
</div> 
... 
function renderAxis(fn, scale, i){ 
        var axis = fn() // <-D 
            .scale(scale) // <-E 
            .ticks(5); // <-G 
... 

D3 Axis旨在与D3标度一起使用。 使用scale（）函数提供轴标度。 在此示例中，我们使用以下比例尺绘制三个不同的轴：