Open In App

D3.js time.domain() Function

The time.domain() function in d3.js is used to set the domain for the time scale. If the domain is not specified then the default domain is [2000-01-01, 2000-01-02].

Syntax:



time.domain([domain]);

Parameters: This function accepts one parameter that is given above and described below.

Return Values: This function does not return anything.



Example 1:




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" path1tent="width=device-width, 
        initial-scale=1.0" />
    <title>Geeks for geeks</title>
    <script src="https://d3js.org/d3.v4.min.js">
    </script>
    <script src="https://d3js.org/d3-color.v1.min.js">
    </script>
    </script>
    </script>
</head>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
      
    <p>D3.js time.domain() Function </p>
  
    <script>
        var time = d3.scaleTime()
  
            // Setting domain for the scale
            .domain([2011 - 01 - 01, 2015 - 05 - 02]);
              
        document.write("<h3>time(1): " + time(1) + "</h3>");
        document.write("<h3>time(2): " + time(2) + "</h3>");
        document.write("<h3>time(3): " + time(3) + "</h3>");
        document.write("<h3>time(4): " + time(4) + "</h3>");
    </script>
</body>
  
</html>

Output:

Example 2: The following example demonstrates the above function when the domain is of type string.




<!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>
    </script>
</head>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
      
    <p>D3.js time.domain() Function </p>
  
    <script>
        // Setting domain for the scale 
        var time = d3.scaleTime()
            .domain(["2011-01-01", "2015-05-02"]);
              
        document.write("<h3>time(10): " 
                    + time(10) + "</h3>");
    </script>
</body>
  
</html>

Output:

Example 3:




<!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>
    </script>
</head>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
      
    <p>D3.js time.domain() Function </p>
      
    <script>
        // Setting domain for the scale 
        var time = d3.scaleTime()
            .domain([1, 100])
        // default range is used.
        document.write("<h3>time(1): " + time(1) + "</h3>");
        document.write("<h3>time(2): " + time(2) + "</h3>");
        document.write("<h3>time(3): " + time(3) + "</h3>");
        document.write("<h3>time(4): " + time(4) + "</h3>");
    </script>
</body>
  
</html>

Output:


Article Tags :