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

Reference:

  • D3-time (Unofficial Chinese Translation)
  • Understanding d3-time

D3 provides two modules d3-time and D3-time-format for processing time-related data. These modules are based on JavaScript’s native date system, so the methods in the module can only read and build local time zones and universal Coordinated Time UTC. It is recommended that you familiarize yourself with the Date object and its methods before using either module.

💡 Time has two “forms” in JavaScript:

  • Coordinated Universal Time/Universal Coordinated timeUniversal Time Coordinated is abbreviated as UTCGreenwich Mean Time (GMT) is the main global Time standard based on atomic Time seconds and Greenwich Mean Time (UTC+0 local Time) as close as possible. If coordinated universal time is represented as a string, a suffix is added to itZlogo
  • A Locale Time is a combination of UTC plus the offset of the Time zone in which the Locale is located. For example, Beijing Time is 8 hours ahead of UTC+8.
const event = new Date(a);/ / place
// The local time of this article is Beijing time, i.e. UTC+8
console.log(event.toString());
// Fri Feb 04 2022 15:38:53 GMT+0800

// Coordinated Universal time
console.log(event.toISOString());
// the T character separates the date from the time
// z stands for coordinated universal time (UTC+0)
/ / the 2022-02-04 T07:38:53. 993 z
Copy the code

In d3 – time module has a lot of methods, one of the most important is can be used to generate specific span of time, such as in days, weeks, months, years time (the time at the “edge” of the spacing, such as the midnight every day, every month on the first day of the zero point in the morning, the first day of a year at zero, etc.), This is very helpful in generating the timeline.

⚠️ The time generated by the chronograph please pay attention to the time type used. If local time is used, for example, Beijing time, the midnight of the current day will be converted to UTC at 16:00 of the previous day

Time has different scales, such as year, month, day, hour, minute, second, millisecond (millisecond is the minimum time precision supported by the D3-time module), so there are corresponding different time margin calculators (used to generate specific interval time, referred to as the chronometer, hereinafter referred to as interval). In addition, two different chronometers are provided for different Time formats (UTC or Local Time Zone) :

  • D3. timeMillisecond and d3.utcMillisecond create an interval of milliseconds

  • D3. timeSecond and d3.utcSecond create an interval in seconds

  • D3. timeMinute and d3.utcMinute create a minute-by-minute interval (a minute is 60 seconds, ignoring leap seconds)

  • D3. timeHour creates an hour-by-hour interval with d3.utcHour (for local time, daylight saving time may be used so that the range of hours in a day is corrected to 23 or 25)

  • D3. timeDay and d3.utcDay create a days-apart interval (for local time, daylight saving time may be used so that the day is corrected to have 23 or 25 hours)

  • D3. timeWeek and d3.utcWeek create a weekly interval (a week is usually 168 hours long, but for local time, daylight saving time may be used so that the week is corrected to 167 or 169 hours). The week starts on A Sunday, so this method is the same as d3.timeSunday and de.utcSunday.

    For weekly spacing, D3 also provides seven intervals to calculate the new week from different starting points:

    • d3.timeSunday 与 d3.utcSundayCreate a weekly interval with Sunday as the starting point of the new week
    • d3.timeMonday 与 d3.utcMondayCreate a weekly interval with Monday as the starting point of the new week
    • d3.timeTuesday 与 d3.utcTuesdayCreate a weekly interval with Tuesday as the starting point of the new week
    • d3.timeWednesday 与 d3.utcWednesdayCreate a weekly interval with Wednesday as the starting point of the new week
    • d3.timeThursday 与 d3.utcThursdayCreate a weekly interval with Thursday as the starting point of the new week
    • d3.timeFriday 与 d3.utcFridayCreate a weekly interval with Friday as the starting point of the new week
    • d3.timeSaturday 与 d3.utcSaturdayCreate a weekly interval with Saturday as the starting point of the new week

  • D3. timeMonth and d3.utcMonth create a monthly interval (the number of days in a month ranges from 28 to 31)

  • D3. timeYear and d3.utcYear create a yearly interval (the number of days in a year ranges from 365 to 366)