Как добавить (пользовательский) разделитель тысяч в D3?

Я работаю с D3Plus, а D3Plus принимает любой метод D3.

Мне удалось удалить десятичные дроби. Чего я не могу сделать, так это добавить '.' в качестве разделителя тысяч вместо «,» (по-испански 1.000.000 означает «один миллион»), и это для испаноязычной аудитории.

Это соответствующая часть моего кода

"number": function(number, params) {
    var formatted = d3plus.number.format(number, params);
      if (params.key === "encuentros") {
        return d3.round(number,0);
      }
      if (params.key === "poblacion") {
        return d3.round(number,0);
      }
      else {
        return formatted;
      }
  }

Я пробовал return d3.round(number,0) + d3.format('.'), но это не работает.

Диаграмма в порядке, но без десятичного разделителя.

введите описание изображения здесь


javascript d3.js d3plus
person pachamaltese    schedule 05.07.2016    source источник

Ответы (4)


arrow_upward
9
arrow_downward

Вы пробовали использовать d3.locale? Это отлично подойдет для вашего варианта использования, потому что он создает функции форматирования на основе ваших собственных правил локализации.

Что вы можете сделать, так это создать собственные правила локализации, которые задают ваш формат:

var myLocale = {
  "thousands": ".",  // specify that thousands are separated with a dot
  // .. other rules
}

А затем используйте эти правила для инициализации вашего пользовательского средства форматирования:

var localeFormatter = d3.locale(myLocale);
// ',.2r' means grouped thousands with two significant digits. 
// By default ',' means 'thousands' but we switched that into a '.' in our custom localization
var myFormatter = localeFormatter.numberFormat(',.2r'); 
var value = myFormatter(1000000); // "1.000.000"

Вот работающий пример:

// custom localization options
var myLocale = {
  "decimal": ".",
  "thousands": ".",
  "grouping": [3],
  "currency": ["$", ""],
  "dateTime": "%a %b %e %X %Y",
  "date": "%m/%d/%Y",
  "time": "%H:%M:%S",
  "periods": ["AM", "PM"],
  "days": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
  "shortDays": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
  "months": ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
  "shortMonths": ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"]

}

// create custom locale formatter from the given locale options
var localeFormatter = d3.locale(myLocale);

// create a formatter for the number (grouped thousands with two significant digits). By default ',' means 'thousands' but we switched that into a '.' in our custom localization
var numberFormat = localeFormatter.numberFormat(",.2r");

// test
console.log(numberFormat(1000000)); // "1.000.000"
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

person nem035    schedule 05.07.2016
comment
Большое спасибо !! это очень хороший подход. Сейчас адаптирую. - person pachamaltese; 06.07.2016

arrow_upward
2
arrow_downward

Вместо сложности пользовательского форматирования чисел D3plus имеет встроенные локализации, в том числе одну для испанского языка. Это не только заботится о форматировании чисел, но и переводит любые интерфейсные сообщения на этот язык. Все, что вам нужно добавить к вашей визуализации, это:

.format("es_ES")

Вот пример на веб-сайте D3plus: http://d3plus.org/examples/advanced/10bfe1908a200c201145/

А вот список поддерживаемых локализаций: https://github.com/alexandersimoes/d3plus/wiki/Localization

person Dave Landry    schedule 22.07.2016

arrow_upward
0
arrow_downward

Ознакомьтесь с исходным кодом d3plus, в частности с библиотекой форматов чисел: https://github.com/alexandersimoes/d3plus/blob/master/src/number/format.coffee

Вот пример того, чего вы пытаетесь достичь здесь: http://d3plus.org/examples/advanced/7760febcda3375b39e1f/

В частности, обратите внимание на метод format() (строки 29–39).

person tatlar    schedule 05.07.2016

arrow_upward
0
arrow_downward

Я думаю, вы ищете D3.numberFormat(",d")

person aabiro    schedule 19.07.2018