Формат чисел в целые числа с префиксом SI

Question

Формат чисел в целые числа с префиксом SI

1

Я рисую диаграмму, которая получает значения доллара (от 0 до миллионов), и я пытаюсь показать хорошие тики. Я уже использовал d3.nice, чтобы получить 5 тиков, которые имеют хорошие значения, это очень круто. Но поскольку существует такая большая разница, я изо всех сил стараюсь правильно отображать свои долларовые значения.

Я хочу сделать:

0-999: показывает себя
1,000 - 999,999: показывает 1k-999k (это нормально, если 999 500 показывает 1M, но не в порядке, чтобы показать 1,00k с помощью d3.format('. 3s') или с 467k перейдите к 400k с помощью d3.format('. 1s "))
1,000,000 - 999,999,999: показывает 1M-999M (также нормально, если он свертывается при округлении)

До версии d3 4 это было легко. Вы можете сделать:

.ticks((d) => {
  var prefix = d3.formatPrefix(d);

  return prefix(d).toFixed()+''+prefix.symbol;
})

Но теперь я читаю d3 v4 docs после того, как это не удается мне, и в нем говорится:

Изменен метод d3.formatPrefix. Вместо того, чтобы возвращать строку префикса SI, он возвращает функцию формата SI-префикса для данного спецификатора и ссылочного значения. Например, чтобы форматировать тысячи:

var f = d3.formatPrefix(",. 0", 1e3);

F (1e3); //"1k"

F (1E4); //"10k"

F (1e5); //"100k"

F (1E6); //"1,000k"

Теперь это невозможно сделать, потому что я хочу изменить количество значащих цифр, но я не вижу очевидного способа добиться этого. Я что-то пропустил?

nawgszy 27 июнь 2017, в 06:44

Источник

Теги:

javascript

d3.js

string-formatting

2 ответа

-1

Хорошо, я полагаю, это было достаточно легко, но немного взломано. Здесь функция форматирования, которую я использовал для создания такого поведения:

(val) => {
  let prefix = d3.formatPrefix('.3s', val);

  let str = prefix(val);

  if (val === 0) {
    return '0';
  }

  return parseInt(str.slice(0, str.length - 2))+''+str.slice(str.length - 1);
}

Я был бы счастлив использовать что-то лучше, поэтому, если у вас есть более чистый ответ, сообщение, и я соглашусь.

nawgszy 27 июнь 2017, в 03:06

Ещё вопросы

Gerardo Furtado · Accepted Answer · 2017-06-27T03-09-00.000Z

Если я правильно понял ваш желаемый результат, вы можете использовать сам номер, чтобы определить value d3.formatPrefix.

Посмотрите на эту демонстрацию:

[1, 999, 1000, 999000, 1000000].forEach(function(d) {
  var prefix = d3.formatPrefix(".0", d)
  console.log(d + ": " + prefix(d))
})

<script src="https://d3js.org/d3.v4.min.js"></script>

PS: Используя этот подход, 999500 даст вам 1000 тыс., А не 1М.