D3.js - 坐标轴 API

D3.js 提供了强大的函数来为您的可视化绘制坐标轴。坐标轴通常由一条线、刻度（固定间隔的标记）以及这些刻度的标签组成。坐标轴与 D3 的比例尺（scales）有着内在联系；每个坐标轴生成器都需要一个比例尺来确定其刻度的位置和值。

配置坐标轴 API

要使用 D3 坐标轴 API，您通常需要包含主 D3 库，其中包含坐标轴模块。如果您使用模块化方法（例如，使用 npm/yarn），则需要导入 d3-axis。

<html>
 <head>
  <script src="https://d3js.org/d3.v7.min.js"></script>
 </head>
 <body>
  <svg id="chart"></svg>
  <script>
   // D3 代码将在这里
  </script>
 </body>
</html>

在模块化环境（例如，使用 ES6 导入）中：

import { select } from 'd3-selection';
import { scaleLinear } from 'd3-scale';
import { axisLeft, axisBottom } from 'd3-axis';

坐标轴 API 方法

D3 提供了四个主要函数来创建坐标轴生成器：

d3.axisTop() − 创建一个新的顶部水平坐标轴生成器。
d3.axisRight() − 创建一个新的右侧垂直坐标轴生成器。
d3.axisBottom() − 创建一个新的底部水平坐标轴生成器。
d3.axisLeft() − 创建一个新的左侧垂直坐标轴生成器。

这些函数返回一个坐标轴生成器。然后，您通常会在一个 SVG <g> 元素上调用这个生成器，使用 .scale() 方法传递关联的比例尺。

工作示例

让我们演示如何向 SVG 容器添加 X 轴和 Y 轴。请按照以下步骤操作：

步骤 1：定义 SVG 尺寸和数据 - 设置您的 SVG 容器以及您将要可视化展示的数据。

const margin = {top: 20, right: 30, bottom: 40, left: 50};
const width = 460 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;

const data = [100, 150, 200, 250, 280, 300];

const svg = d3.select("body")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

步骤 2：创建比例尺 - 为 X 和 Y 维度定义比例尺。这些比例尺将您的数据域映射到像素范围。

const xScale = d3.scaleLinear()
    .domain([0, data.length -1]) // 假设数据映射到 X 轴的索引
    .range([0, width]);

const yScale = d3.scaleLinear()
    .domain([0, d3.max(data)])
    .range([height, 0]); // 在 SVG 中，Y=0 在顶部

在这里，我们创建了线性比例尺。X 比例尺将数据索引映射到宽度，Y 比例尺将数据值映射到高度（反向，因为 SVG 的 Y 轴是向下递增的）。

步骤 3：创建并调用 X 轴生成器 - 为 X 轴创建一个坐标轴生成器，并将其与 xScale 关联。

const xAxis = d3.axisBottom(xScale);

svg.append("g")
    .attr("class", "x-axis")
    .attr("transform", `translate(0,${height})`)
    .call(xAxis);

我们使用 d3.axisBottom() 来创建底部的水平坐标轴。我们添加一个 <g> 元素来容纳坐标轴，将其平移到图表区域的底部，然后使用 .call(xAxis) 来渲染坐标轴。

步骤 4：创建并调用 Y 轴生成器 - 同样，为 Y 轴创建一个坐标轴生成器。

const yAxis = d3.axisLeft(yScale);

svg.append("g")
    .attr("class", "y-axis")
    .call(yAxis);

我们使用 d3.axisLeft() 来创建左侧的垂直坐标轴。它被添加到另一个 <g> 元素中。如果它在我们主绘图组的起始位置，则不需要平移。

步骤 5：（可选）样式化坐标轴 - 您可以使用 CSS 样式化坐标轴。

/* 在您的 CSS 文件或 <style> 标签中 */
.x-axis path,
.x-axis line,
.y-axis path,
.y-axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.x-axis text,
.y-axis text {
    font-family: sans-serif;
    font-size: 10px;
    fill: #333;
}

步骤 6：完整工作示例 - 以下是完整的 HTML 和 JavaScript 代码。

<html>
 <head>
  <title>D3.js 坐标轴示例</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <style>
   .x-axis path,
   .x-axis line,
   .y-axis path,
   .y-axis line {
       fill: none;
       stroke: #555; /* 更改颜色以提高可见性 */
       stroke-width: 1px; /* 添加了 stroke-width */
       shape-rendering: crispEdges;
   }

   .x-axis text,
   .y-axis text {
       font-family: sans-serif;
       font-size: 11px; /* 字体稍大 */
       fill: #333;
   }
   body {
       font-family: sans-serif;
   }
  </style>
 </head>
 <body>
  <h2>D3.js Axis Example</h2>
  <div id="chart-container"></div>

  <script>
   const margin = {top: 20, right: 30, bottom: 40, left: 50};
   const width = 460 - margin.left - margin.right;
   const height = 400 - margin.top - margin.bottom;

   // 示例数据（可以是任意数字数组）
   const data = [100, 120, 140, 160, 180, 200, 220, 240, 260, 280, 300];

   const svg = d3.select("#chart-container")
       .append("svg")
       .attr("width", width + margin.left + margin.right)
       .attr("height", height + margin.top + margin.bottom)
     .append("g")
       .attr("transform", `translate(${margin.left},${margin.top})`);

   // X 比例尺 - 将数据索引映射到位置
   const xScale = d3.scaleLinear()
       .domain([0, data.length - 1])
       .range([0, width]);

   // Y 比例尺 - 将数据值映射到位置
   const yScale = d3.scaleLinear()
       .domain([0, d3.max(data)])
       .range([height, 0]); // 请记住：在 SVG 的 Y 坐标中，0 在顶部

   // X 轴生成器
   const xAxis = d3.axisBottom(xScale)
       .ticks(data.length); // 建议刻度数量
       // .tickFormat(i => `Point ${i + 1}`); // 自定义刻度格式化的示例

   // Y 轴生成器
   const yAxis = d3.axisLeft(yScale)
       .ticks(5); // 建议 5 个刻度

   // 将 X 轴添加到 SVG
   svg.append("g")
       .attr("class", "x-axis")
       .attr("transform", `translate(0, ${height})`)
       .call(xAxis);

   // 将 Y 轴添加到 SVG
   svg.append("g")
       .attr("class", "y-axis")
       .call(yAxis);

   // 示例：为坐标轴添加标签（可选）
   svg.append("text")
      .attr("transform", `translate(${width/2}, ${height + margin.bottom -5})`)
      .style("text-anchor", "middle")
      .text("数据索引");

   svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0 - margin.left)
      .attr("x", 0 - (height / 2))
      .attr("dy", "1em")
      .style("text-anchor", "middle")
      .text("值");

  </script>
 </body>
</html>

在浏览器中打开此 HTML 文件时，您将在一个 SVG 元素中看到渲染的两个坐标轴。X 轴在底部，Y 轴在左侧。这些坐标轴将具有与定义的比例尺相对应的刻度和标签。