D3提供绘制轴的功能.轴由线，刻度线和标签组成.轴使用Scale，因此每个轴都需要给出一个可以使用的比例.
您可以配置API使用以下脚本.
<script src = "https://d3js.org/d3-axis.v1.min.js"></script> <script> </script>
D3提供以下绘制轴的重要功能.它们的简要描述如下.
d3.axisTop() : 此方法用于创建顶部水平轴.
d3.axisRight() : 此方法用于创建垂直的右向轴.
d3.axisBottom() : 此方法用于创建底部水平轴.
d3.axisLeft() : 它创建左垂直轴.
让我们学习如何添加x和y轴到图表.为此，我们需要遵循以下步骤.
第1步 : 定义变量 : 使用下面的代码定义SVG和数据变量.
var width = 400, height = 400;
var data = [100, 150, 200, 250, 280, 300];
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);第2步 : 创建比例线性函数 : 为x轴和y轴创建一个比例线性函数，如下所示.
var xscale = d3.scaleLinear() .domain([0, d3.max(data)]) .range([0, width - 100]); var yscale = d3.scaleLinear() .domain([0, d3.max(data)]) .range([height/2, 0]);
在这里，我们创建了一个线性比例并指定了域和范围.
步骤3 : 向x轴添加比例 : 现在，我们可以使用以下代码向x轴添加比例.
var x_axis = d3.axisBottom() .scale(xscale);
在这里，我们使用d3.axisBottom来创建我们的x轴，并为它提供之前定义的比例.
第4步 : 向y轴添加比例 : 使用以下代码将比例添加到y轴.
var y_axis = d3.axisLeft() .scale(yscale);
在这里，我们使用d3.axisLeft来创建我们的y轴并为其提供我们在上面定义的比例.
第5步 : 应用转换 : 您可以附加一个组元素并插入x，y轴，这将在下面定义.
svg.append("g")
.attr("transform", "translate(50, 10)")
.call(y_axis);第6步 : 追加群组元素 : 使用以下代码应用转换和组元素.
var xAxisTranslate = height/2 + 10;
svg.append("g")
.attr("transform", "translate(50, " + xAxisTranslate +")")
.call(x_axis)第7步 : 工作实例 : 完整的代码清单在以下代码块中给出.创建一个网页 axes.html 并添加以下更改.
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
svg text {
fill: purple;
font: 12px sans-serif;
text-anchor: end;
}
</style>
</head>
<body>
<script>
var width = 400, height = 400;
var data = [100, 120, 140, 160, 180, 200];
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var xscale = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, width - 100]);
var yscale = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([height/2, 0]);
var x_axis = d3.axisBottom().scale(xscale);
var y_axis = d3.axisLeft().scale(yscale);
svg.append("g")
.attr("transform", "translate(50, 10)")
.call(y_axis);
var xAxisTranslate = height/2 + 10;
svg.append("g")
.attr("transform", "translate(50, " + xAxisTranslate +")")
.call(x_axis)
</script>
</body>
</html>现在，请求浏览器，我们会看到以下更改.
