D3.js | d3.scaleBand() Function
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 = </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 = </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
Please Login to comment...