使用日期作为数字，但在UI中将其格式化为日期

Question

让我们举个例子。

https://d3fc.io/examples/series-canvas-candlestick/

它将X标度定义为时间标度。

const xScale = d3
    .scaleTime()
    .domain(fc.extentDate().accessors([d => d.date])(data));

为了防止在我的缩放处理程序中进行多个刻度到日期的转换，我希望始终使用number，但保持UI将这些数字显示为日期。因此，我将上面的代码更改为线性缩放。

const xScale = d3
    .scaleLinear()
    .domain(fc.extentLinear().accessors([d => d.date.getTime()])(data));

一切都很好，但现在我有了一个显示数字而不是日期的X刻度。问题是，如何添加在UI中将这些数字显示为日期的映射器或格式化程序？我看到了一些d3.tickFormat的例子，但不确定如何在d3fc中应用它。

https://observablehq.com/@d3/axis-ticks

Answer 1

您将您的比例提供给D3FC笛卡尔图表，然后将这些比例与它为您创建的轴相耦合。

作为mentioned in the documentation，图表显示带有x和y前缀的X和Y轴的属性。因此，如果要更改X轴的记号格式(通常通过tickFormat属性执行此操作)，请改为执行以下操作：

var chart = fc.chartCartesian(
    d3.scaleLinear(),
    d3.scaleLinear()
  )
  .xTickFormat(/* ... formatter goes here */);