The formatPrefix() function in D3.js is used to convert the values to the unit of the appropriate SI prefix such as pico, femto, milli, etc. for the given numbers.
Syntax:
d3.formatPrefix(specifier, value);
Parameters: It takes the two parameters which are given above and described below.
- Specifier: It is the specifier that tells the formatting style.
- Value: It is the specified numeric reference value before formatting in fixed-point notation.
Return Value: This method returns a function.
Below given are a few examples of formatPrefix() function.
Example 1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> </style> <body> <!--Fetching from CDN of D3.js --> <script type = "text/javascript" </script> <script> // It is the Floating point up to two decimals // value is 1e-1 console.log(d3.formatPrefix(".4s", 1e-1)(58)) // It sets the SI-Prefix with two significant digits // value is 1e-2 console.log(d3.formatPrefix(".4s", 1e-2)(42000)) // Currency sign i.e $ // value is 1e-3 console.log(d3.formatPrefix("$, ", 1e-3)(4200)) // Filled with dots and centered in between them // value is 1e-4 console.log(d3.formatPrefix("^, ", 1e-14)(42.444)) // Localised fixed-point currency // value is 1e-5 console.log(d3.formatPrefix("($.2f", 1e-5)(42.444)) // value is 1e-8 console.log(d3.formatPrefix("#", 1e-18)(2)) // value is 1e-9 console.log(d3.formatPrefix("#s", 1e-9)(42)) // Number is grouped thousand with two significant digits // value is 1e-12 console.log(d3.formatPrefix(", .2r", 1e-12)(421)) </script> </body> </html> |
Output:
Example 2:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> </style> <body> <!--Fetching from CDN of D3.js --> <script type = "text/javascript" </script> <script> // It is the Floating point up to two decimals // value is 1e-24 console.log( "y- yocto: ", d3.formatPrefix(".4s", 1e-24)(58)) // It sets the SI-Prefix with two significant digits // value is 1e-21 console.log( "z-zepto: ", d3.formatPrefix(".4s", 1e-21)(42000)) // Currency sign i.e $ // value is 1e-15 console.log( "f-femto: ", d3.formatPrefix("$, ", 1e-15)(4200)) // value is 1e-6 console.log( "micro: ", d3.formatPrefix("^, ", 1e-6)(42.444)) // value is 1e+3 console.log( "k-kilo: ", d3.formatPrefix("($.2f", 1e+3)(42.444)) // value is 1e-9 console.log( "n-nano: ", d3.formatPrefix(".4s", 1e-9)(4)) // value is 1e+18 console.log( "E-exa: ", d3.formatPrefix(".4s", 1e+18)(424)) // value is 1e+24 console.log( "Y-yotta: ", d3.formatPrefix(".2f", 1e+24)(0)) </script> </body> </html> |
Output:
