D3.js threshold.invertExtent() Function
Last Updated :
24 Aug, 2020
The threshold.invertExtent() function in d3.js is used to return the extent of the values in the specified domain.
Syntax:
threshold.invertExtent(value);
Parameters: This function accepts a single parameter as given above and described below:
- value: This parameter takes a value from the given range.
Return Values: This function returns a value from the domain corresponding to the given input value.
Below given are a few examples of the function given above.
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 =
</ script >
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< h2 style = "color:green;" >Geeks for geeks</ h2 >
< p >threshold.invertExtent() Function </ p >
< script >
var threshold = d3.scaleThreshold()
// Setting domain for the scale.
.domain([1, 2, 3, 4])
.range(["red", "green", "blue"]);
let val1=threshold.invertExtent("green");
let val2=threshold.invertExtent("blue");
document.write("< h4 >["+val1+"]</ h4 >");
document.write("< h4 >["+val2+"]</ 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 =
</ script >
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< h2 style = "color:green;" >Geeks for geeks</ h2 >
< p >threshold.invertExtent() 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.invertExtent(10);
let val2=threshold.invertExtent(50);
let val3=threshold.invertExtent(20);
document.write("< h4 >["+val1+"]</ h4 >");
document.write("< h4 >["+val2+"]</ h4 >");
document.write("< h4 >["+val3+"]</ h4 >");
</ script >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...