The time.rangeRound() function is used to set the range of the scale to the specified array of values along with setting the interpolator to intepolateRound.
Syntax:
time.rangeRound([range]);
Parameters: This function accepts one parameter that is given above and described below.
- range: This parameter accepts an array of numbers or strings.
Return Value: This function does not return anything.
Below given are a few examples of the function given above.
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>     </script>     </script>     </script>       <style>         body {             margin-left: 40px;         }           h2 {             color: green;         }           div {             float: left;             width: 280px;         }     </style> </head>   <body>     <h2>Geeks for neveropen</h2>     <p>time.rangeRound() Function </p>           <script>         var time = d3.scaleTime()             // Setting domain for the scale.             .domain([1, 10])             // Setting the range of the scale.             .range([1, 100]);           document.write(             "<div><h3>Without time.rangeRound()</h3>");         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></div>");           var time = d3.scaleTime()             // Setting domain for the scale.             .domain([1, 10])             // Setting the range of the scale.             .rangeRound([1, 100]);         document.write(             "<div><h3>With time.rangeRound()</h3>");         document.write(             "<div><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></div>");     </script> </body>   </html> |
Output:
Example 2:
HTML
<!DOCTYPE html> <html lang="en"> Â Â <head> Â Â Â Â <meta charset="UTF-8" /> Â Â Â Â <meta name="viewport" path1tent= Â Â Â Â Â Â Â Â "width=device-width, initial-scale=1.0" /> Â Â Â Â Â Â </script> Â Â Â Â </script> Â Â Â Â <script src= Â Â Â Â </script> Â Â Â Â <script src= Â Â Â Â </script> Â Â Â Â Â Â <style> Â Â Â Â Â Â Â Â body { Â Â Â Â Â Â Â Â Â Â Â Â margin-left: 40px; Â Â Â Â Â Â Â Â } Â Â Â Â Â Â Â Â Â Â h2 { Â Â Â Â Â Â Â Â Â Â Â Â color: green; Â Â Â Â Â Â Â Â } Â Â Â Â </style> </head> Â Â <body> Â Â Â Â <h2>Geeks for neveropen</h2> Â Â Â Â <p>time.rangeRound() Function </p> Â Â Â Â <script> Â Â Â Â Â Â Â Â Â Â var time = d3.scaleTime() Â Â Â Â Â Â Â Â Â Â Â Â Â Â // Setting domain for the scale. Â Â Â Â Â Â Â Â Â Â Â Â .domain([2001 - 01 - 01, 2000 - 01 - 02]) Â Â Â Â Â Â Â Â Â Â Â Â .rangeRound([1, 10]) Â Â Â Â Â Â Â Â document.write("<h3>time(2.4): "Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â + time(2.4) + "</h3>"); Â Â Â Â Â Â Â Â Â Â document.write("<h3>time(2): "Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â + time(2) + "</h3>"); Â Â Â Â Â Â Â Â Â Â document.write("<h3>time(6.4): "Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â + time(6.4) + "</h3>"); Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â document.write("<h3>time(4.5): "Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â + time(4.5) + "</h3>"); Â Â Â Â </script> </body> Â Â </html> |
Output:

