D3.js formatPrefix() Function

Last Updated : 23 Jul, 2020

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" 
          src = "https://d3js.org/d3.v4.min.js"> 
  </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" 
          src = "https://d3js.org/d3.v4.min.js"> 
  </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:

Suggest improvement

D3.js format() Function

Share your thoughts in the comments

D3.js formatPrefix() Function

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?