D3.js - Axis API

D3提供绘制轴的功能.轴由线，刻度线和标签组成.轴使用Scale，因此每个轴都需要给出一个可以使用的比例.

配置Axis API

您可以配置API使用以下脚本.

轴API方法

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 并添加以下更改.

现在，请求浏览器，我们会看到以下更改.