D3轴:基于数字设置域,但将其显示为字符串

sr4lhrrt  于 2023-06-23  发布在  其他
关注(0)|答案(2)|浏览(152)

我有一个像这样的对象数组作为数据集

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

我现在正在创建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))

接下来是

因此,这个正确的域,7620是最小的秒值和7800最高,但现在不是显示秒,我希望显示“时间”值。X轴上的第一个标签将是“20:07”,而不是7620。
简而言之,创建基于秒的域,但显示时间。我该怎么做?

ddhy6vgd

ddhy6vgd1#

您可以使用tickFormat转换刻度标签:

this.chart.append('g')
  .call(d3.axisBottom(this.x).tickFormat(d3.timeFormat("%H:%M")))
juud5qan

juud5qan2#

this.x = d3.scaleBand()          
      .domain(array.map(value=>value.time))
      .range([ 0, width])

对于自定义标签,我更喜欢使用scaleBand()

相关问题