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('

Solution 1:

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

<scriptsrc="https://d3js.org/d3.v4.min.js"></script>

Solution 2:

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

fcopy = d3.format;
functionmyFormat(){ 
         function_ret = fcopy.apply(d3, arguments) 
         return (function(args){returnfunction (){ 
                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.

Solution 3:

If you don't want to override the library globally, but you want to use your "B" function around the place the same way as d3.format:

import { format } from'd3-format';
exportconstformatBillions = fs => s =>format(fs)(s).replace(/G/, "B");