score:9
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>
score:0
check out the source code for d3plus, in particular the number format library: https://github.com/alexandersimoes/d3plus/blob/master/src/number/format.coffee
there is an example of what you are trying to achieve here: http://d3plus.org/examples/advanced/7760febcda3375b39e1f/
in particular, look at the format()
method (lines 29 - 39).
score:0
i think you are looking for d3.numberformat(",d")
score:2
instead of the complexity of a custom number formatter, d3plus has localizations built in, including one for spanish. not only does this take care of number formatting, but it also translates any interface messages into that language. all you'd have to add to your visualization is this:
.format("es_es")
here's an example on the d3plus website: http://d3plus.org/examples/advanced/10bfe1908a200c201145/
and here's a list of the supported localizations: https://github.com/alexandersimoes/d3plus/wiki/localization
Source: stackoverflow.com
Related Query
- How to add a (custom) thousand separator in D3?
- How to make custom thousand separator and decimal character in D3.js in Version 5.7.0
- How to add custom tick labels in d3.js?
- How to add custom colors in D3 nodes of a graph
- How to add Custom value in timeFormat d3?
- How to add custom conditional colors in D3 tree nodes?
- How to add custom colors to specific arcs in donut charts in d3?
- How can I add custom data annotations to a dc.js chart?
- How to add a separator in D3 bar chart D3V3
- How to add a separator in D3 bar chart
- How to add a custom svg shape in D3.js
- How to add a tooltip to an svg graphic?
- How to add an image to an svg container using D3.js
- How to add border/outline/stroke to SVG elements in CSS?
- How to properly add and use D3 Events?
- d3.js how to dynamically add nodes to a tree
- How to add a click event on nvd3.js graph
- How to add using d3.js selection.text() method
- How to add in zero values into a time series in d3.js / JavaScript
- How to add more metrics on the country_map in Apache-superset?
- How do I make a custom axis formatter for hours & minutes in d3.js?
- How to add drop shadow to d3.js pie or donut chart
- How to add an interactive visualization to R markdown
- D3 DataMaps (or jvectormap): How to put a custom object on map by coords
- How to add compound node in a D3 force layout?
- d3.js: How to add labels to scatter points on graph
- How to add Label to each state in d3.js (albersUsa)?
- How to add a background color to d3 text elements?
- How to add horizontal line over y-axis in Plottable.js
- How to add a nice legend to a d3 pie chart
More Query from same tag
- Multiple line transitions in d3.js
- TypeError: Cannot read property 'year' of undefined
- How to Write Typescript d.ts FIle to Extend @types/d3
- How do I submit a json file for d3.json?
- How do I create a border with gradiant opacity in CSS ?
- Adding arguments in dynamically created buttons
- D3 with Angular - Half Pie chart Chart colors sequence
- Create elements for datalist in d3
- d3 force layout nodes always start at top-left of screen
- Using D3 to read csv returns html instead of csv data
- Should I concatenate my dependencies on my Javascript library?
- Dimple.js scatter plot not drawing correctly in Firefox v. 38.0.5
- Mapping interval values on ordinal scale in D3.js
- set svg element property asyncronously with D3
- d3.js using .attr() after each()?
- D3 ticks() does not return value if provided scale has only 1 result
- Map + Legend on same svg
- Transition of labels in D3.js: Rename label names on change and transition smoothly
- X & Y Co-ordinates of selective bars in a stack graph
- D3 Equivalent to jQuery Attribute selector
- D3 line chart legend not working with v3 but working with v2
- y axis set custom values in D3 Charts v4
- Using D3.nest() to create an array of objects by column header
- d3 General Update Pattern
- D3.js - Creating a rectangle?
- Gather data points in an irregular shape
- How to make nodes in sankey diagram clickable using d3.js library
- ember-cli Unclosed element `d.y` causing ember app to crash
- D3 Labels text amount slightly off
- Exploded Pie Chart on click with d3.js