D3.js pow.tickFormat() Function

The pow.tickFormat() function is used to change the format of the tick values. It returns a number format function that is suitable for displaying a tick value.

Syntax:

pow.tickFormat( count, specifier )

Parameters: This function accepts two parameters as mentioned above and described below.

count: It is the number of tick values to be used. It is an optional parameter.
specifier: It is a string which specifies the format to be used. It is an optional parameter.

Return Values: This function does not return anything.

The program below illustrates the pow.tickFormat() function in D3.js:

Example 1:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
        content="width=device-width,
                 initial-scale=1.0" />
  <title>GeeksforGeeks</title>
  <script src=
"https://d3js.org/d3.v4.min.js">
  </script>
  <script src=
"https://d3js.org/d3-color.v1.min.js">
  </script>
  <script src=
"https://d3js.org/d3-interpolate.v1.min.js">
  </script>
  <script src=
"https://d3js.org/d3-scale-chromatic.v1.min.js">
  </script>
</head>
<body>
  <h2 style="color: green">GeeksforGeeks</h2>
  
<p>pow.tickFormat() Function </p>

  <script>
    var x = d3.scalePow()
      .domain([0, 1])
      .range([1, 2, 3, 4, 5, 6])
      .exponent(0.5);

    var ticks = x.ticks(5)
    var tickFormat = x.tickFormat(100000, " %");

    document.write("<h3>" + 
        ticks.map(tickFormat) + "</h3>");
  </script>
</body>
</html>

Output:

Example 2:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" 
        content="width=device-width,
                 initial-scale=1.0" />
  <title>GeeksforGeeks</title>
  <script src=
"https://d3js.org/d3.v4.min.js">
  </script>
  <script src=
"https://d3js.org/d3-color.v1.min.js">
  </script>
  <script src=
"https://d3js.org/d3-interpolate.v1.min.js">
  </script>
  <script src=
"https://d3js.org/d3-scale-chromatic.v1.min.js">
  </script>
</head>
<body>
  <h2 style="color: green">GeeksforGeeks</h2>
  
<p>pow.tickFormat() Function </p>

  <script>
    var x = d3.scalePow()
      .domain([1, 10])
      .range([10, 20, 30, 40, 50, 60])
      .exponent(2);

    var ticks = x.ticks(5)
    var tickFormat = x.tickFormat(10, " $");

    document.write("<h3>" + 
        ticks.map(tickFormat) + "</h3>");
  </script>
</body>
</html>

Output:

D3.js pow.tickFormat() Function

Explore