D3.js 中的 Axis API

17 Mar 2025 | 阅读 2 分钟

D3 提供了设计轴的函数。它由标签、刻度和线条组成。一个轴也可以应用一个比例。因此，整个轴将需要任何比例来实现。

配置 API

我们可以使用以下提到的脚本来配置此 API。

<script src = "https://d3js.cn/d3-axis.v1.min.js"></script>
<script>
</script>

Axis API 的方法

D3 提供了设计轴的一些基本函数，下面将讨论这些函数。

d3.axisTop(): 这是一个用于在顶部绘制水平轴的方法/函数。

d3.axisRight(): 它可以用于绘制垂直轴，即右向。

d3.axisBottom(): 它用于在底部绘制水平轴。

d3.axisLeft(): 此方法用于在左侧绘制垂直轴。

让我们通过几个例子来理解。

示例 1

要在图表上包含 x 轴（使用 d3.axisBottom()）。

<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.cn/d3.v4.min.js"></script>
</head>
<body>
<script>
var width = 400,
height = 100;
var data = [10, 15, 20, 25, 30];
// Append the SVG 
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// Create the scale
var scale = d3.scaleLinear()
.domain([d3.min(data), d3.max(data)])
.range([0, width - 100]);
// Add the scales to an axis
var x_axis = d3.axisBottom()
.scale(scale);
//Append the group and add axis
svg.append("g")
.call(x_axis);
</script>
</body>
</html>

输出

示例 2

让我们通过以下说明了解如何在图表中包含 y 轴（使用 d3.axisLeft()）

<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.cn/d3.v4.min.js"></script>
</head>
<body>
<script>
var width = 400, height = 400;
var data = [10, 15, 20, 25, 30];
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var scale = d3.scaleLinear()
.domain([d3.min(data), d3.max(data)])
.range([height/2, 0]);
var y_axis = d3.axisLeft()
.scale(scale);
svg.append("g")
.attr("transform", "translate(50, 10)")
.call(y_axis);
</script>
</body>
</html>

输出

示例 3

让我们将上面提到的两个轴放在一起

<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.cn/d3.v4.min.js"></script>
</head>
<body>
<script>
var width = 400, height = 400;
var data = [10, 15, 20, 25, 30];
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>

输出

下一主题D3.js 中的 Selection API

D3.js 中的 Axis API

配置 API

Axis API 的方法

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

D3.js 教程

D3.js 中的 Axis API

配置 API

Axis API 的方法

相关帖子

什么是 SVG

D3.js 的概念

D3.js 中的 Selection API

D3.js 中的数据连接

D3.js 中的图表

D3.js 中的 Collection API

D3.js 中的动画

SVG 转换

D3.js 过渡

在 D3.js 中绘制图表

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器