Open In App

D3.js | d3.scaleBand() Function

Improve
Improve
Like Article
Like
Save
Share
Report

The d3.scaleBand() function in D3.js is used to construct a new band scale with the domain specified as an array of values and the range as the minimum and maximum extents of the bands. This function splits the range into n bands where n is the number of values in the domain array.

Syntax:

d3.scaleBand().domain(array of values).range(array of values);

Parameters: This function does not accept any parameters.

Return Value: This function returns the corresponding range for the domain’s value.

Below programs illustrate the d3.scaleBand() function in D3.js:

Example 1:




<!DOCTYPE html>
<html>
  
<head>
    <title>
        D3.js | d3.scaleBand() Function
    </title>
      
    <script src =
        "https://d3js.org/d3.v4.min.js">
    </script>
</head>
  
<body>
    <script>
          
        // Calling the scaleBand() function
        var A = d3.scaleBand()
            .domain(['January', 'February', 'March', 'April', 'May'])
            .range([10, 50]);
          
        // Getting the corresponding range for
        // the domain value
        console.log(A('January'));
        console.log(A('February'));
        console.log(A('March'));
        console.log(A('April'));
        console.log(A('May'));
    </script>
</body>
  
</html>


Output:

10
18
26
34
42

Example 2:




<!DOCTYPE html>
<html>
  
<head>
    <title>
        D3.js | d3.scaleBand() Function
    </title>
      
    <script src =
        "https://d3js.org/d3.v4.min.js">
    </script>
</head>
  
<body>
    <script>
          
        // Calling the scaleBand() function
        var A = d3.scaleBand()
            .domain(['January', 'February', 'March', 'April', 'May'])
            .range([1, 2]);
           
        // Getting the corresponding range for
        // the domain value
        console.log(A('January'));
        console.log(A('February'));
        console.log(A('March'));
        console.log(A('April'));
        console.log(A('May'));
    </script>
</body>
  
</html>


Output:

1
1.2
1.4
1.6
1.8

Reference: https://devdocs.io/d3~5/d3-scale#scaleBand



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