D3.js scalePoint() Function
Last Updated :
18 Sep, 2020
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:
Share your thoughts in the comments
Please Login to comment...