2013-06-11 9 views
9

Podczas rysowania wykresów za pomocą kodów SI jest to dokładnie to, czego chcemy. Nasze wartości osi y są zwykle dużymi wartościami walutowymi. np .: 10 411 504,011,20jak zdobyć lokalizowalne lub konfigurowalne kody si z d3.format

Skrót ten, przynajmniej w amerykańskim locale, powinien się przełożyć na 10,4 mld USD.

Ale używając "s" typu d3.format dla kodów SI, wyświetliłoby się to jako 10.4G. Może to być dobre dla niektórych ustawień lokalnych i dobre, gdy mamy do czynienia z wartościami komputerowymi (np. Prędkość procesora, pamięć ...), ale nie tak z wartościami walutowymi i innymi nie komputerowymi typami wartości.

Czy istnieje sposób na uzyskanie funkcji specyficznej dla lokalizacji podobnej do kodów SI, które przeliczałyby miliardy na B zamiast na G, itd ...?

(zdaję sobie sprawę, jest to głównie rzecz SI-kody i nie specyficzne dla D3, ale ponieważ używam D3 wydaje się najbardziej odpowiedni tag.)

+5

Ja też kiedyś wpadł na ten temat i nie mógł znaleźć niczego idiomatyczne go obsłużyć, więc skończyło się w ten sposób: 'si = d3.format ('s');' 'siMod = function (val) {return si (val) .replace (/ G /, 'B')}; ' – meetamit

+0

racja, wygląda na to, że zrobię to samo. mam nadzieję, że ten typ funkcji zostanie wbudowany w d3 kiedyś. – lostdorje

+0

To nadal nie jest częścią ram D3, prawda? Nie można znaleźć sposobu na zmianę ustawień na amerykańskie locale na podstawie ich dokumentacji. –

Odpowiedz

10

Wolę nadrzędny d3.formatPrefix. Wtedy możesz po prostu zapomnieć o zamianie napisów w swoim kodzie Vizera. Po prostu wykonaj następujący kod zaraz po załadowaniu D3.js.

// Change D3's SI prefix to more business friendly units 
//  K = thousands 
//  M = millions 
//  B = billions 
//  T = trillion 
//  P = quadrillion 
//  E = quintillion 
// small decimals are handled with e-n formatting. 
var d3_formatPrefixes = ["e-24","e-21","e-18","e-15","e-12","e-9","e-6","e-3","","K","M","B","T","P","E","Z","Y"].map(d3_formatPrefix); 

// Override d3's formatPrefix function 
d3.formatPrefix = function(value, precision) { 
    var i = 0; 
    if (value) { 
     if (value < 0) { 
      value *= -1; 
     } 
     if (precision) { 
      value = d3.round(value, d3_format_precision(value, precision)); 
     } 
     i = 1 + Math.floor(1e-12 + Math.log(value)/Math.LN10); 
     i = Math.max(-24, Math.min(24, Math.floor((i - 1)/3) * 3)); 
    } 
    return d3_formatPrefixes[8 + i/3]; 
}; 

function d3_formatPrefix(d, i) { 
    var k = Math.pow(10, Math.abs(8 - i) * 3); 
    return { 
     scale: i > 8 ? function(d) { return d/k; } : function(d) { return d * k; }, 
     symbol: d 
    }; 
} 

function d3_format_precision(x, p) { 
    return p - (x ? Math.ceil(Math.log(x)/Math.LN10) : 1); 
} 

Po uruchomieniu tego kodu, spróbuj formatowanie numeru z SI prefiksu:

d3.format(".3s")(1234567890) // 1.23B 

Można rozszerzyć ten kod całkiem po prostu wspierać różne lokalizacje o tym locale specyficzne d3_formatPrefixes wartości w obiekcie, a następnie wybierz właściwy, który pasuje do potrzebnego locale.

+2

"e-3" jest o wiele lepsza niż "m" podczas kreślenia informacji finansowych. Dzięki! – ninjaPixel

+0

Dzięki! Działa to również z etykietowaniem osi wykresu. – kimsk

+0

Mam pytanie tutaj (http://stackoverflow.com/q/41385010/1735836) możesz być w stanie mi pomóc. Wygląda na to, że twoja odpowiedź może zadziałać, ale nie jestem pewien i nie wiem, jak ją wdrożyć. – Patricia

Powiązane problemy