如何使用D3.js绘制不规则坐标轴？

核心思路 #

d3.scaleLinear()会强制刻度均匀分布，无法实现不规则间距的坐标轴。要达成需求，我们需要手动定义每个刻度对应的视觉位置，通过序数比例尺或自定义映射关系来实现非均匀的刻度布局。

具体实现步骤 #

1. 定义刻度数据与对应位置 #

先准备好刻度值，以及每个刻度在坐标轴上的像素位置（以x轴为例）：

// 刻度值和对应的x轴像素位置
const tickData = [
  { value: "0", x: 50 },
  { value: "10", x: 100 },
  { value: "50", x: 250 },
  { value: "100", x: 400 },
  { value: "200", x: 600 }
];

2. 创建自定义比例尺 #

用序数比例尺绑定刻度值与对应位置，实现值到像素的映射：

const customScale = d3.scaleOrdinal()
  .domain(tickData.map(item => item.value))
  .range(tickData.map(item => item.x));

如果刻度是数值类型，也可以用自定义对象映射替代序数比例尺，灵活性更高。

3. 绘制坐标轴 #

结合D3的坐标轴生成器，基于自定义比例尺绘制坐标轴：

// 创建SVG容器
const svg = d3.select("body")
  .append("svg")
  .attr("width", 700)
  .attr("height", 150);

// 创建x轴生成器
const xAxis = d3.axisBottom(customScale);

// 渲染坐标轴
svg.append("g")
  .attr("transform", "translate(0, 100)")
  .call(xAxis);

4. 样式调整（可选） #

如果需要匹配预期视觉效果，可通过CSS调整刻度样式：

.tick line {
  stroke: #ccc;
}
.tick text {
  font-size: 12px;
  fill: #333;
}
.domain {
  stroke: #333;
}

关键说明 #

这种方法完全摆脱了线性比例尺的均匀限制，通过手动控制每个刻度的位置，能实现任意不规则的间距布局。如果需要动态调整刻度位置，只需修改tickData中的坐标值即可。

内容的提问来源于stack exchange，提问作者王敬伟