在D3 v4中创建工作时间timeScale? [英] Create working hours timeScale in D3 v4?

问题描述

如何在D3 v4中创建仅显示工作时间的timeScale和轴?

How do I create a timeScale and axis in D3 v4 that only shows working hours?

例如，如果我有一个图表在每个小时的开始显示一个队列中的项目数，而工作日是从上午9点到下午5点，那么我如何显示连续的天数而又没有下午5点到上午9点之间的所有时间?

For example, if I have a chart that shows number of items in a queue at the start of every hour, and the work day is 9am to 5pm, how do I show successive days without all the hours between 5pm and 9am?

如果我有超过5天的数据并且能够放大或缩小到任意天数，我还需要在周末休假.

I also need to take out the weekends if I have more than 5 days of data and be able to zoom in or out to any number of days.

我可以使用时间间隔过滤器功能删除不需要的刻度和标签，但是timeScale本身仍显示所有小时数.

I can take out the unwanted ticks and labels with a time interval filter function, but the timeScale itself still shows all the hours.

推荐答案

不幸的是，您的两个要求...

Unfortunately, both your requirements...

• 在D3 v4中创建仅显示工作时间的timeScale和轴"
• 如果我有超过5天的数据，请在周末休假"

...如果使用时间标度，则根本不可能.

... are simply not possible if you use a time scale.

根据d3的创建者Mike Bostock的说法:

According to Mike Bostock (creator of d3):

当您要将时间显示为连续的定量变量时(例如，当您考虑到由于夏令时变化而导致天数可能介于23到25小时之间时)，应使用d3.time.scale，由于leap年，年份可能在365-366天之间变化.如果您不想绘制连续时间以及我们正常日历单位中的所有不规则性，那么您可能不想使用d3.time.scale，而想要[另一个比例尺]反而.(强调我的)

A d3.time.scale should be used when you want to display time as a continuous, quantitative variable, such as when you want to take into account the fact that days can range from 23-25 hours due to daylight savings changes, and years can vary from 365-366 days due to leap years. If you don’t want to plot continuous time, and all of the irregularities in our normal calendar units, then you probably don’t want to use d3.time.scale, and want [another scale] instead. (emphasis mine)

(注意:在他的回答中，Bostock使用的是v3.x.但是，对于v4来说，推理仍然相同)

(Note: in his answer, Bostock is using v3.x. However, the reasoning remains the same for v4)

因此，在您的情况下，更好的方法是创建一个带刻度(

Thus, in your case, a better approach would be creating a band scale (d3.scaleBand()), and mapping your days and hours like this:

day 1, 9am --> 0
day 1, 10am --> 1
day 1, 11am --> 2
day 1, 12am --> 3
day 1, 1pm --> 4
day 1, 2pm --> 5
day 1, 3pm --> 6
day 1, 4am --> 7
day 1, 5am --> 8
day 2, 9am --> 9
day 2, 10am --> 10
...etc

然后，您将获得条形图x位置的那些值:

Then, you'll have those values for the x position of your bars:

[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11...]

将它们用作定性(而非定量)值，以使用波段标尺定位条形.

Use them as qualitative (not quantitative) values to position the bars using your band scale.

这篇关于在D3 v4中创建工作时间timeScale?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！