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:
