d3.format(): числовые форматы (процент, валюта, экспоненциальный)

Функция d3.format() предназначена для преобразования чисел в строковое представление с заданным форматом. В библиотеке D3.js она используется практически во всех типах визуализации:

  • подписи осей;
  • всплывающие подсказки;
  • таблицы;
  • легенды;
  • отображение процентов;
  • форматирование денежных значений;
  • вывод больших чисел;
  • научная нотация.

d3.format() работает по принципу шаблонов. Формат задаётся строкой-спецификатором.

Базовый синтаксис:

const format = d3.format("спецификатор");
format(число);

Пример:

const format = d3.format(".2f");

console.log(format(3.14159));

Результат:

3.14

Структура спецификатора формата

Спецификатор состоит из набора символов:

[[fill]align][sign][symbol][0][width][,][.precision][type]

На практике чаще всего используются:

Элемент Назначение
.2f два знака после запятой
, разделитель тысяч
% проценты
$ валюта
e экспоненциальный формат
s SI-префиксы
d целое число
f число с фиксированной точкой

Формат фиксированной точки f

Тип f выводит число в стандартном десятичном формате.

Округление

const format = d3.format(".2f");

console.log(format(12.3456));

Результат:

12.35

Количество знаков после запятой

d3.format(".0f")(12.9)
13
d3.format(".1f")(12.94)
12.9
d3.format(".3f")(12.94)
12.940

Форматирование отрицательных чисел

const format = d3.format(".2f");

console.log(format(-15.678));

Результат:

-15.68

Разделители тысяч

Символ , добавляет разделители разрядов.

const format = d3.format(",.2f");

console.log(format(1234567.89));

Результат:

1,234,567.89

Особенно важно при отображении:

  • финансовых данных;
  • статистики;
  • больших объёмов информации;
  • аналитических панелей.

Разделители без дробной части

const format = d3.format(",d");

console.log(format(2500000));

Результат:

2,500,000

Тип d работает только с целыми числами.

Процентный формат %

Символ % автоматически:

  1. умножает число на 100;
  2. добавляет знак %.

Базовый пример

const format = d3.format(".1%");

console.log(format(0.756));

Результат:

75.6%

Точность процентов

d3.format(".0%")(0.823)
82%
d3.format(".2%")(0.823)
82.30%

Проценты в графиках

Часто применяется при построении:

  • pie chart;
  • donut chart;
  • stacked chart;
  • heatmap;
  • аналитических дашбордов.

Пример в tooltip:

const percent = d3.format(".1%");

tooltip.text(percent(value));

Валютный формат

Символ валюты $

const format = d3.format("$.2f");

console.log(format(1250.5));

Результат:

$1250.50

Валюта с разделителями

const format = d3.format("$,.2f");

console.log(format(1250000.5));

Результат:

$1,250,000.50

Отрицательные денежные значения

const format = d3.format("$,.2f");

console.log(format(-4500.75));

Результат:

−$4,500.75

Пользовательские валюты

d3.format() не привязан только к доллару. Символ можно добавлять вручную.

const rub = value => `${d3.format(",.2f")(value)} ₽`;

console.log(rub(12500));

Результат:

12,500.00 ₽

Экспоненциальный формат e

Экспоненциальная запись используется для:

  • очень больших чисел;
  • очень маленьких значений;
  • научных вычислений;
  • инженерных данных.

Базовый пример

const format = d3.format(".2e");

console.log(format(123456));

Результат:

1.23e+5

Малые значения

const format = d3.format(".3e");

console.log(format(0.00001234));

Результат:

1.234e-5

Точность экспоненциального формата

d3.format(".1e")(15000)
1.5e+4
d3.format(".4e")(15000)
1.5000e+4

SI-префиксы s

Тип s автоматически сокращает большие числа:

Значение Результат
1000 1k
1000000 1M
1000000000 1G

Пример

const format = d3.format(".2s");

console.log(format(1500));
console.log(format(2500000));

Результат:

1.5k
2.5M

SI-формат в визуализациях

Очень полезен для:

  • осей графиков;
  • финансовых панелей;
  • телеметрии;
  • отображения трафика;
  • мониторинга систем.

Форматирование целых чисел d

Тип d используется для вывода integer-значений.

const format = d3.format("d");

console.log(format(42));

Результат:

42

Совмещение с разделителями

const format = d3.format(",d");

console.log(format(987654321));

Результат:

987,654,321

Заполнение и выравнивание

Минимальная ширина

const format = d3.format("8.2f");

console.log(format(12.3));

Результат:

   12.30

Заполнение нулями

const format = d3.format("08.2f");

console.log(format(12.3));

Результат:

00012.30

Выравнивание

По левому краю

const format = d3.format("<10.2f");

console.log(format(12.3));

Результат:

12.30

По центру

const format = d3.format("^10.2f");

console.log(format(12.3));

Результат:

  12.30

Управление знаком числа

Всегда показывать знак

const format = d3.format("+.2f");

console.log(format(12.3));
console.log(format(-12.3));

Результат:

+12.30
-12.30

Пробел перед положительными значениями

const format = d3.format(" .2f");

console.log(format(12.3));
console.log(format(-12.3));

Результат:

 12.30
-12.30

Локализация числовых форматов

В разных странах используются разные:

  • десятичные разделители;
  • разделители тысяч;
  • обозначения валют.

Для настройки применяется d3.formatLocale().

Русская локаль

const ru = d3.formatLocale({
    decimal: ",",
    thousands: " ",
    grouping: [3],
    currency: ["₽", ""]
});

const format = ru.format("$,.2f");

console.log(format(1234567.89));

Результат:

₽1 234 567,89

Форматирование осей

Одно из главных применений — подписи осей.

Ось с процентами

const y = d3.axisLeft(scale)
    .tickFormat(d3.format(".0%"));

Денежная ось

const y = d3.axisLeft(scale)
    .tickFormat(d3.format("$,.0f"));

SI-формат для больших данных

const x = d3.axisBottom(scale)
    .tickFormat(d3.format(".2s"));

Форматирование tooltip

Пример для валюты

const money = d3.format("$,.2f");

tooltip.html(`
    Revenue: ${money(value)}
`);

Пример для процентов

const percent = d3.format(".1%");

tooltip.text(percent(ratio));

Комбинирование форматов

Валюта + разделители + точность

d3.format("$,.2f")(1250000.456)

Результат:

$1,250,000.46

Проценты + округление

d3.format(".0%")(0.987)

Результат:

99%

Экспоненциальный формат + точность

d3.format(".4e")(123456789)

Результат:

1.2346e+8

Частые ошибки

Использование % с уже умноженными значениями

Неправильно:

d3.format(".0%")(75)

Результат:

7500%

Правильно:

d3.format(".0%")(0.75)

Использование d для дробных чисел

Неправильно:

d3.format("d")(12.5)

Тип d предназначен только для integer.

Отсутствие локализации

Для русскоязычных интерфейсов формат:

1,234,567.89

выглядит непривычно. Обычно используется:

1 234 567,89

Производительность

Создание formatter-функции — сравнительно дорогая операция. Внутри циклов лучше не вызывать d3.format() постоянно.

Неправильно:

data.forEach(d => {
    console.log(d3.format(".2f")(d.value));
});

Правильно:

const format = d3.format(".2f");

data.forEach(d => {
    console.log(format(d.value));
});

Практические шаблоны

Финансовые приложения

const money = d3.format("$,.2f");

Аналитика

const percent = d3.format(".1%");

Научные вычисления

const scientific = d3.format(".3e");

Большие объёмы данных

const compact = d3.format(".2s");

Сводная таблица форматов

Формат Описание Пример
.2f фиксированная точка 12.34
,.2f разделители тысяч 1,234.56
.1% проценты 75.6%
$.2f валюта $12.50
.2e экспоненциальный 1.23e+4
.2s SI-префиксы 1.5k
d целое число 42
08.2f заполнение нулями 00012.30
+.2f знак числа +12.30
Оглавление