Offer to come, dig friends take it! I am participating in the 2022 Spring Recruit Punch card activity. Click here for details.

See the Data Visualization column for a series of articles

Time to take about

Interval is a method that calls interval([date]) directly to calculate the lower bound of the interval for a given date, that is, a date object.

// Create a Date object based on the string
// Use coordinated universal time (UTC)
const utcDateObj = new Date("The 2022-02-02 T06: spoken. 123 z");
console.log(utcDateObj); / / "the 2022-02-04 T20: spoken. 123 z"

// Create different intervals and call them directly, specifying utcDateObj as the input parameter
// Since the input time is in UTC format, the corresponding method is used to create the interval
const year = d3.utcYear(utcDateObj);
const month = d3.utcMonth(utcDateObj);
const hour = d3.utcHour(utcDateObj);
const minute = d3.utcMinute(utcDateObj);
const second = d3.utcSecond(utcDateObj);
const millisecond = d3.utcMillisecond(utcDateObj);

// Prints the results of different interval calls
// Returns the lower bound of the interval at a given time. It is a Date object created at that time and automatically converted to a string when printed
console.log("utcYear Lower Boundary: ", year);
console.log("utcMonth Lower Boundary: ", month);
console.log("utcHour Lower Boundary: ", hour);
console.log("utcMinute Lower Boundary: ", minute);
console.log("utcSecond Lower Boundary: ", second);
console.log("utcMillisecond Lower Boundary: ", millisecond);
Copy the code

The console output is as follows, and you can see the Codepen for a code demonstration

The above example starts with the Date object utcDateObj (which takes UTC time) created based on the string 2022-02-02T06:40:10.123z. Create a series of corresponding intervals and call them directly, specifying the input parameter as the created Date object utcDateObj. Each of these intervals returns a new Date object that represents the lower boundary time of utcDateObj at the corresponding time scale. You can think of these chronographs as conversions to the current time, extracting specific time fields, such as the month, from the input Date object, and then creating a new Date object at midnight on the first day of the month, representing the month. This is useful for creating a time scale, as shown in the following diagram with three intervals of days, months, and years:

💡 If the optional date parameter is omitted, the current time new date () is used as the default input parameter. Calling interval(date) directly is equivalent to using the interval’s method interval.floor(date), the difference being that interval.floor() must be passed as an argument.

Interval is also an object, and there are several ways to get a Date object that satisfies different requirements:

  • The interval.floor(date) method is used to calculate the lower bound of the interval to which date belongs at a given time.

    For intervals with a time scale greater than hours, the last time point of the Date object returned is 12:00am. For example, d3.timeday.floor (date) returns a date object at midnight (local time) on the date date

    💡 Since the Date object returned is the lower bound of the interval time scale, interval.floor(interval.floor(Date) -1) returns the lower bound of the previous interval, For example, d3.timeday. floor(d3.timeday.floor (date) -1) returns midnight (local time) the day before the date.

    ⚠️ When comparing whether the dates are equal, the values should be converted first

    // If date is already the date in the margin, i.e., midnight of that day, the function returns true
function isDay(date) {
  return +d3.timeDay.floor(date) === +date;
}
Copy the code

  • The method interval.ceil(date) is used to calculate the upper bound of the interval to which date belongs at a given time.

    For example, d3.timeday. ceil(date) returns a date object at midnight (local time) the day after the date

  • The interval.round(date) method is similar to the “round” operation for the date. The upper or lower bound of the interval is returned according to the distance between the input parameter date and the midpoint of the interval to which it belongs.

    For example, d3.timeday. round(date) If the specified time is at noon or before 12:00pm, the upper bound is returned, that is, a date object is returned at 00:00 (local time) on the day of the date. If the given date is at 12:00pm after noon, the lower bound is returned, that is, a date object at 00:00 (local time) the day after the date

In addition to modifying time and getting upper and lower bounds for a given time scale, the interval can do more with time:

  • The interval. Offset (date[, step]) method offsets the input date and returns a date object created based on the offset point in time, without the boundary value.

    The first argument date is a date object that acts as the reference time, the starting point of the offset

    The second (optional) argument step is an integer (if the input parameter step is not an integer, it is internally revised down first) to set the offset (which varies in units depending on the time scale of interval). The default value is 1 and can be negative.

    For example, if date is at 5:30 PM, d3.timeday. offset(date, 1) returns a date object at 5:30 PM tomorrow

    💡 if step is 0, the method returns a new date object with the same point in time as date

  • The interval.range(start, stop[, step]) method returns an array of Date objects within a specified time range at the same interval. And these Date objects are lower bounds on the interval time scale.

    The first and second arguments start (inclusive) and stop (exclusive) are used to set the time range

    The third (optional) parameter step is an integer (if the input parameter step is not an integer, it will be internally revised down first) that sets the step size, that is, the amount of time (the units vary according to the time scale of interval) at which a point in time is collected to generate a Date object. The default value of step is 1

    For example, d3.timeday. range(start, stop) returns the first Date object of the array, whose time is greater than the start time (if the start time is exactly midnight, the first time can be start). And is the lower boundary of interval time scale; The last Date object, whose point in time is less than the stop point, is also the lower boundary of the interval time scale

    💡 D3 also provides syntactic sugar for the interval.range() method of the chronometer at different time scales:

    • D3. timeMilliseconds(Start, stop[, step]) and d3.utcMilliseconds(Start, Stop [, step]) have a time scale of milliseconds

    • D3. timeSeconds(start, stop[, step]) and d3.utcSeconds(start, stop[, step]) time scales are in seconds

    • D3. timeMinutes(start, stop[, step]) and d3.utcMinutes(start, stop[, step]) time scales are minute levels

    • D3. timeHours(start, stop[, step]) and d3.utcHours(start, stop[, step]) time scales are hours

    • D3. timeDays(start, stop[, step]) and d3.utcDays(start, stop[, step]) time scales are days

    • UtcWeeks (start, stop[, step]); utcWeeks(start, stop[, step]); utcWeeks(start, stop[, step]) So 7 different methods are provided:

      • d3.timeSundays(start, stop[, step]) 和 d3.utcSundays(start, stop[, step])The time scale is weekly, and Sunday is the beginning of each week
      • d3.timeMondays(start, stop[, step]) 和 d3.utcMondays(start, stop[, step])Start your week on Monday
      • d3.timeTuesdays(start, stop[, step]) 和 d3.utcTuesdays(start, stop[, step])Start your week on Tuesday
      • d3.timeWednesdays(start, stop[, step]) 和 d3.utcWednesdays(start, stop[, step])Start the week on Wednesday
      • d3.timeThursdays(start, stop[, step]) 和 d3.utcThursdays(start, stop[, step])Start each week on Thursday
      • d3.timeFridays(start, stop[, step]) 和 d3.utcFridays(start, stop[, step])Start your week on Friday
      • d3.timeSaturdays(start, stop[, step]) 和 d3.utcSaturdays(start, stop[, step])Start each week on Sunday

    • D3.timemonths (start, stop[, step]) and D3.utcmonths (start, stop[, step]) time scales are monthly

    • D3. timeYears(start, stop[, step]) and d3.utcYears(start, stop[, step]) are years

    The name of the time in the above methods is complex to indicate that the return value of these methods is an array containing multiple Date objects

  • The interval.count(start, end) method returns the number of intervals in the start (not included) and end (included) time ranges at interval’s time scale

    const start = 'the 2021-04-08 T15:20:05. 123 z';
const end = 'the 2021-04-15 T15:20:05. 123 z';
daysBetween = d3.timeDay.count(start, end); / / 7
Copy the code

    Whether 💡 start and end points are included differs from interval.range() because interval.count() counts the number of intervals based on an index of 0