Блог

Давайте возьмем этот пример.

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

Он определяет масштаб X как шкалу времени.

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

Чтобы предотвратить многократное преобразование тика в дату в моем обработчике масштабирования, я бы хотел всегда работать с number, но сохранить пользовательский интерфейс, показывающий эти числа как даты. Итак, я меняю приведенный выше код на линейный масштаб.

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

Все работает нормально, но теперь у меня есть X-образная шкала, показывающая цифры вместо дат. Вопрос в том, как добавить mapper или formatter, который отображал бы эти числа как даты в пользовательском интерфейсе? Я вижу несколько примеров d3.tickFormat, но не уверен, как применить его в d3fc.

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

Вы предоставляете свои масштабы декартовой диаграмме D3FC, которая затем связывает их с осями, которые она создает для вас.

Как упоминалось в документации, диаграмма предоставляет свойства осей X и Y с префиксом x и y . Итак, если вы хотите изменить формат деления для оси X, что вы обычно делаете с помощью tickFormat свойства, вы вместо этого делаете следующее:

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