D3.js坐标轴配置：基于数值设定义域，显示字符串标签

问题描述 #

我的数据集是结构如下的对象数组：

[
 {
  time: '20:07',
  seconds: 7620,
  value: 49995
 },
 ...
]

我当前通过以下代码创建X轴：

this.x = d3.scaleLinear()          
      .domain(this.values.map(function(d) { return d.seconds}))
      .range([ 0, width])
              
this.chart.append('g')
  .call(d3.axisBottom(this.x))

当前X轴的定义域正确（最小秒数7620，最大7800），但轴标签显示的是秒数值。我希望将轴标签替换为对应的time字符串（例如第一个标签显示'20:07'而非7620），也就是基于秒数设置定义域，却显示时间字符串，请问该如何实现？

解决方案 #

核心是给X轴添加刻度格式化函数，把秒数值映射回对应的时间字符串，以下是两种实用方案：

方案一：构建秒数-时间映射表

先从数据中生成一个键为秒数、值为对应时间的映射对象，再通过查表返回时间：

// 构建秒数到时间的映射关系
const secondToTime = {};
this.values.forEach(d => {
  secondToTime[d.seconds] = d.time;
});

// 创建X轴时指定刻度格式化规则
this.chart.append('g')
  .call(d3.axisBottom(this.x)
    .tickFormat(function(d) {
      // d为当前刻度的秒数值，返回对应时间；无匹配时显示原秒数
      return secondToTime[d] || d;
    })
  );

方案二：直接在格式化函数中匹配数据

如果数据量不大，可直接在格式化函数里遍历数据匹配对应时间（注意绑定this以访问数据集）：

this.chart.append('g')
  .call(d3.axisBottom(this.x)
    .tickFormat(function(d) {
      const targetItem = this.values.find(item => item.seconds === d);
      return targetItem ? targetItem.time : d;
    }.bind(this))
  );

拓展：处理非数据内的刻度秒数

如果D3自动生成的中间刻度秒数不在你的数据集内，上述方案会显示原秒数。若需要对这类秒数也格式化，可将秒数转为Date对象再格式化：

this.chart.append('g')
  .call(d3.axisBottom(this.x)
    .tickFormat(function(d) {
      // 假设秒数为当日累计秒数，转换为时间格式
      const time = new Date(0);
      time.setSeconds(d);
      return d3.timeFormat('%H:%M')(time);
    })
  );

这种方式无需依赖数据中的time字段，直接通过秒数计算时间，适用性更广。

内容的提问来源于stack exchange，提问作者Ettur