Skip to content
Related Articles

Related Articles

D3.js format() Function
  • Last Updated : 23 Jul, 2020

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :