How to add a (custom) thousand separator in D3?
pachamaltese
I'm working with D3Plus and D3Plus accepts any D3 method.
I could manage to remove decimals. What I cannot do is adding a '.' as a thousand separator instead of a ',' (in spanish 1.000.000 is 'one million') and this is for a spanish-speaking audience.
This is the relevant part of my code
"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;
}
}
I did try return d3.round(number,0) + d3.format('.') but that does not work.
The chart is "ok" but without decimal separator.
nem035
Have you tried using d3.locale? It would work great for your use case because it builds the formatting functions based on your own localization rules.
What you can do is create custom localization rules that give your format:
var myLocale = {
"thousands": ".", // specify that thousands are separated with a dot
// .. other rules
}
And then use those rules to initialize your custom formatter:
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"
Here's a running example:
// 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>Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: How to import a module and change a variable value inside module and execute it
- Next: Elasticsearch Multiple Prefix Keywords
Related
Related Related
- 1
How to format number with "." as thousand separator, and "," as decimal separator?
- 2
Only add thousand separator before decimal comma
- 3
d3.format thousand separator on variables?
- 4
How to add Thousand separator in both axis of a 2-y axis chart in R using ggplot2
- 5
How to calculate numbers with dot thousand separator in javascript
- 6
How to get Excel to use digit grouping separator (thousand separator) universally?
- 7
Add $ sign to label text on bars and add thousand separator
- 8
Handsontable - can't set thousand separator for custom cell
- 9
How to add custom colors in D3 nodes of a graph
- 10
How to add custom colors in D3 nodes of a graph
- 11
Add Thousand separator to any number even if it contains special characters
- 12
Use a regular expression to add a period (dot) as a thousand separator
- 13
Add Thousand separator to any number even if it contains special characters
- 14
Thousand Separator in DBGrid
- 15
Devexpress XRtableCell thousand separator?
- 16
Thousand separator in awk
- 17
How to get default decimal / thousand separator for current locale in .net
- 18
how to paste numbers with thousand separator from excel to sqldeveloper table editor
- 19
How to parse two space-delimited numbers with thousand separator?
- 20
validate decimal with decimal separator and thousand separator
- 21
How to add thousand separating commas for numbers in angularJS?
- 22
Set global thousand separator on knitr
- 23
Regex valid numbers with thousand separator
- 24
Format number with space as thousand separator
- 25
Thousand separator not working right way
- 26
Adding Thousand Separator to Int in Swift
- 27
Remove thousand separator from string
- 28
dot instead of comma as thousand separator
- 29
Thousand separator with wide/unicode stream
Comments