D3.js | d3.scaleBand() Function
Last Updated :
30 Jul, 2019
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>
var A = d3.scaleBand()
.domain([ 'January' , 'February' , 'March' , 'April' , 'May' ])
.range([10, 50]);
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>
var A = d3.scaleBand()
.domain([ 'January' , 'February' , 'March' , 'April' , 'May' ])
.range([1, 2]);
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
Share your thoughts in the comments
Please Login to comment...