The threshold.domain() function is used to set the domain of the threshold scale. The values given in this must be in non-descending order, if not then the behavior of the scale is undefined.
Syntax:
threshold.domain([domain]);
Parameters: This function accepts a single parameter as given above and described below.
- domain: This parameter accepts an array of elements in a sorted order which sets the domain of the scale.
Return Value: This function does not return any value.
Below programs illustrate the threshold.domain() function in D3.js
Example 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" path1tent=
"width=device-width,initial-scale=1.0" />
<script src="https://d3js.org/d3.v4.min.js">
</script>
</head>
<body>
<h2 style="color: green;">GeeksforGeeks</h2>
<p>threshold.domain() Function</p>
<script>
var threshold = d3.scaleThreshold()
// Setting domain for the scale.
.domain([1, 2, 3, 4])
.range([10, 20, 30, 40, 50]);
let val1 = threshold(1);
let val2 = threshold(2);
let val3 = threshold(4);
document.write("<h4>" + val1 + "</h4>");
document.write("<h4>" + val2 + "</h4>");
document.write("<h4>" + val3 + "</h4>");
</script>
</body>
</html>
Output:
Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" path1tent=
"width=device-width, initial-scale=1.0" />
<script src="https://d3js.org/d3.v4.min.js">
</script>
</head>
<body>
<h2 style="color: green;">GeeksforGeeks</h2>
<p>threshold.domain() Function </p>
<script>
var threshold = d3.scaleThreshold()
// Setting domain for the scale.
.domain([1, 2, 3, 4]);
document.write("<h4>" + threshold(0) + "</h4>");
document.write("<h4>" + threshold(4) + "</h4>");
</script>
</body>
</html>
Output:
