D3.scaleThreshold threshold() Function
The threshold() function of d3.scaleThreshold when given a value as input from the specified domain returns a value mapping to it from the given range of the scale.
Syntax:
threshold(value);
Parameters: This function takes only one parameter as given above and described below.
- value: It accepts any value from the specified domain.
Return Values: This function return a value from the specified range corresponding to the given input value.
Below given are a few examples of the function given above.
Note: If domain have n elements then the range must always contain n+1 element.
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 > < script src = "https://d3js.org/d3-color.v1.min.js" > </ script > < script src = "https://d3js.org/d3-interpolate.v1.min.js" > </ script > < script src = "https://d3js.org/d3-scale-chromatic.v1.min.js" > </ script > </ head > < body > < h2 style = "color:green;" > Beginner for Beginner </ h2 > < p >threshold() Function </ p > < script > var threshold = d3.scaleThreshold() // Setting domain for the scale. .domain([1, 2, 10, 3]) .range([10, 20, 30, 40, 50]); // Threshold function let val1=threshold(1); let val2=threshold(2); 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 = "https://d3js.org/d3.v4.min.js" > </ script > < script src = "https://d3js.org/d3-color.v1.min.js" > </ script > < script src = "https://d3js.org/d3-interpolate.v1.min.js" > </ script > < script src = "https://d3js.org/d3-scale-chromatic.v1.min.js" > </ script > </ head > < body > < h2 style = "color:green;" >Beginner for Beginner</ h2 > < p >threshold() Function </ p > < script > var threshold = d3.scaleThreshold() // Setting domain for the scale. .domain([1, 2, 3, 4]) .range(["red", "green", "blue"]); // Threshold function let val1=threshold(1); let val2=threshold(); document.write("< h4 >"+val1+"</ h4 >"); document.write("< h4 >"+val2+"</ h4 >"); </ script > </ body > </ html > |
Output: