The d3.scalepoint() function is used to create and return a new point scale with a particular domain and range, no rounding, no padding, and center alignment.
Syntax:
d3.scalePoint([[domain, ]range]);
Parameters: This function takes two parameters as given above and described below:
- domain: It defines the minimum and maximum value for the scale. By default, the domain contain an empty array.
- range: Every value in domain maps with value in the range. The default range is [0,1].
Return Values: This function does not return anything.
Example 1:
HTML
<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta name="viewport" path1tent=         "width=device-width,         initial-scale = 1.0" />       <script src=     </script> </head>   <body>     <script>         // Creating the point scale with         // specified domain and range.         var point = d3.scalePoint()               // Setting domain for the scale             .domain(["red", "green", "black", "blue"])                       // Setting the range for the scale.             .range([0.1, 0.2, 0.3, 0.4, 0.5]);           console.log("point(red)", point("red"));         console.log("point(black)", point("black"));         console.log("point(green)", point("green"));         console.log("point(blue)", point("blue"));     </script> </body>   </html> |
Output:
Example 2:
HTML
<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta name="viewport" path1tent=         "width=device-width,         initial-scale = 1.0" />       <script src=     </script> </head>   <body>     <script>         // Creating the point scale with         // specified domain and range.         var point = d3.scalePoint()               // Setting domain for the scale             .domain([0, 1, 2, 3, 4, 5, 6])                       // Setting the range for the scale.             .range([3, 4, 0.5]);           console.log("point(1)", point("1"));         console.log("point(3)", point("3"));         console.log("point(5)", point("5"));     </script> </body>   </html> |
Output:
