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