D3.js time.range() Function
The time.range() function is used to set the range of the scale to the specified array of values. The array given contains two or more elements.
Syntax:
time.range([range]);
Parameters: This function accepts single parameter as mentioned above and described below:
- range: This parameter accepts an array of numbers or strings.
Return Values: This function does not return anything.
Below examples illustrate the time.range() function in D3.js:
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 = "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;" > w3wiki </ h2 > < p >time.range() Function </ p > < script > // Setting domain for the scale. // Setting the range of the scale. var time = d3.scaleTime() .domain([1, 100]) .range([1, 10]); document.write("< h3 >time(10): " +time(10)+"</ h3 >"); document.write("< h3 >time(20): " +time(20)+"</ h3 >"); document.write("< h3 >time(30): " +time(30)+"</ h3 >"); document.write("< h3 >time(40): " +time(40)+"</ h3 >"); </ script > </ body > </ html > |
Output:
Example 2: The following example demonstrates the above function when the range is of type string.
HTML
<!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 > < style > </ style > < body > < h2 style = "color: green;" > w3wiki </ h2 > < p >time.range() Function </ p > < script > // Setting domain for the scale. // Setting the range of the scale. var time = d3.scaleTime() .domain([1, 10]) .range(["red", "green"]); document.write("< h3 >time(1.5): " +time(1.5)+"</ h3 >"); document.write("< h3 >time(2): " +time(2)+"</ h3 >"); document.write("< h3 >time(3.5): " +time(3.5)+"</ h3 >"); document.write("< h3 >time(4.5): " +time(4.5)+"</ h3 >"); </ script > </ body > </ html > |
Output:
Contact Us