Open In App

D3.js time.range() Function

Improve
Improve
Like Article
Like
Save
Share
Report

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=
    </script
    <script src=
    </script
    <script src=
    </script
    <script src=
    </script
</head
<body
    <h2 style="color:green;">
        Geeksforgeeks
    </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=
    </script
    <script src=
    </script
    <script src=
    </script
    <script src=
    </script
</head
<style>
  
</style>
<body
    <h2 style="color: green;">
        Geeksforgeeks
    </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:



Last Updated : 31 Aug, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads