Open In App

D3.js format() Function

Improve
Improve
Like Article
Like
Save
Share
Report

The format() function in D3.js is used to format the numbers in different styles available in D3. It is the alias for locale.format.

Syntax:

d3.format(specifier)(value);

Parameters: It takes the parameters given above and described below.

  • specifier: It specifies the format type.
  • value: It is the number to be formatted.

Return Value: It returns the Number.

Below given are a few examples of the above function.

Example1:




<!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 gives the floating point up to two decimals
    console.log(d3.format(".2f")(42.444))
    // It sets the SI-Prefix with two significant digits
    console.log(d3.format(".4s")(42000))
    // Currency sign i.e $
    console.log(d3.format("$, ")(4200))
    /* Left and right side of the number is
        filled with dots and centered.*/
    console.log(d3.format("^, ")(42.444))
    // Localised fixed-point currency
    console.log(d3.format("($.2f")(42.444))
    console.log(d3.format(".^20")(42))
    // Prefixed lowercase hexadecimal number
    console.log(d3.format("#x")(2))
    // Prefixed lowercase hexadecimal number
    console.log(d3.format("#x")(42))
    /* Number is grouped thousand with 
      two significant digits*/
    console.log(d3.format(", .2r")(42124))
 </script>
</body>
</html>


Output:



Last Updated : 23 Jul, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads