Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

D3: Formatting tick value. To show B (Billion) instead of G (Giga)

I want to format Y-axis data in D3 Line chart. It's about world population so that is quite large.

I am currently using below code, which is showing "G" instead of "B".

d3.format("s")

I researched and found that here "G" stands of Giga, is there a way to change it to B which denotes Billion?

Thanks.

like image 883
Rashmit Dalbir Singh Avatar asked Nov 23 '16 21:11

Rashmit Dalbir Singh


2 Answers

If you like the formatting of SI-prefix, but not the actual prefix, just swap it out with a simple .replace:

var f = d3.format("0.2s");

document.write(
  f(1e9).replace(/G/,"B")
);
<script src="https://d3js.org/d3.v4.min.js"></script>
like image 165
Mark Avatar answered Nov 10 '22 21:11

Mark


If you want to apply Mark's Answer Globally, I used the following

fcopy = d3.format;
function myFormat(){ 
         function_ret = fcopy.apply(d3, arguments) 
         return (function(args){return function (){ 
                return args.apply(d3, arguments).replace(/G/, "B");
         }})(function_ret) 
} 
d3.format = myFormat;

I had the same problem with Superset, I added this in the static/dashboard file.

like image 37
abytecoder Avatar answered Nov 10 '22 19:11

abytecoder