Wie fügt man ein (benutzerdefiniertes) Tausendertrennzeichen in D3 hinzu?

Question

Ich arbeite mit D3Plus und D3Plus akzeptiert jede D3-Methode.

Ich könnte schaffen, Dezimalzahlen zu entfernen. Was ich nicht tun kann, ist ein '.' als tausend Trennzeichen anstelle eines ',' (in Spanisch 1.000.000 ist 'eine Million') und dies ist für ein spanischsprachiges Publikum.

Dies ist der relevante Teil meines Codes

"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; 
     } 
    } 

ich return d3.round(number,0) + d3.format('.') habe versucht, aber das funktioniert nicht.

Das Diagramm ist "ok", aber ohne Dezimaltrennzeichen.

Answer 1

Haben Sie versucht, d3.locale zu verwenden? Es würde sich gut für Ihren Anwendungsfall eignen, da es die Formatierungsfunktionen basierend auf Ihren eigenen Lokalisierungsregeln erstellt.

Was können Sie tun, ist kundenspezifische Lokalisierungs Regeln erstellen, die Ihr Format geben:

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

Und dann diese Regeln verwenden, um Ihre benutzerdefinierten Formatierer zu initialisieren:

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" 

Hier ist ein aktuelles Beispiel:

// 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>

Answer 2

Überprüfen Sie den Quellcode für d3plus, insbesondere das Zahlenformat Bibliothek: https://github.com/alexandersimoes/d3plus/blob/master/src/number/format.coffee

Es ist ein Beispiel dafür, was Sie versuchen, hier zu erreichen: http://d3plus.org/examples/advanced/7760febcda3375b39e1f/

In Schauen Sie sich insbesondere die Methode format() an (Zeilen 29 - 39).

Answer 3

Anstelle der Komplexität eines benutzerdefinierten Zahlenformatierers verfügt D3plus über integrierte Lokalisierungen, einschließlich eines für Spanisch. Das sorgt nicht nur für die Formatierung von Zahlen, sondern übersetzt auch alle Nachrichten in diese Sprache. dies alles, was Sie Ihre Visualisierung hinzuzufügen haben würden, ist:

.format("es_ES") 

Hier ist ein Beispiel auf der D3plus Webseite: http://d3plus.org/examples/advanced/10bfe1908a200c201145/

Und hier ist eine Liste der unterstützten Lokalisierungen: https://github.com/alexandersimoes/d3plus/wiki/Localization