D3.js 在D3 v4中创建工作时间刻度？

如何在D3V4中创建一个只显示工作时间的时间刻度和轴

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

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

我可以用时间间隔过滤功能去除不需要的刻度和标签，但时间刻度本身仍然显示所有的小时

---

请检查小提琴-

如果您计划始终显示12个条形图，其中9个来自所选日期，3个来自后天。。。你可以这样做

//set constant timestamps
var timeStamps = ["9am", "10am", "11am", "12pm", "1pm", "2pm", "3pm", "4pm", "5pm", "9am", "10am", "11am"];

//set linear scale
    var x = d3.scale.linear()
      .domain([0, timeStamps.length])
      .range([0, width]);

    // Add your axis
    svg.append("g")
      .attr("transform", "translate(50,0)")
      .call(d3.svg.axis().scale(x).ticks(timeStamps.length)
        .tickFormat(function(i) {
          return timeStamps[i];
        }));

---

请检查小提琴-

如果您计划始终显示12个条形图，其中9个来自所选日期，3个来自后天。。。你可以这样做

//set constant timestamps
var timeStamps = ["9am", "10am", "11am", "12pm", "1pm", "2pm", "3pm", "4pm", "5pm", "9am", "10am", "11am"];

//set linear scale
    var x = d3.scale.linear()
      .domain([0, timeStamps.length])
      .range([0, width]);

    // Add your axis
    svg.append("g")
      .attr("transform", "translate(50,0)")
      .call(d3.svg.axis().scale(x).ticks(timeStamps.length)
        .tickFormat(function(i) {
          return timeStamps[i];
        }));

---

不幸的是，你的两个要求

• “在D3 v4中创建仅显示工作时间的时间刻度和轴”
• “如果我有超过5天的数据，请将周末排除在外”

。。。如果使用时间刻度，则不可能实现

根据迈克·博斯托克（d3的创建者）的说法：

当您希望将时间显示为连续的定量变量时，应使用d3.time.scale，例如，当您希望考虑到由于夏时制的变化，天数可能在23-25小时之间，而由于闰年，年份可能在365-366天之间。如果您不想绘制连续的时间，以及我们正常日历单位中的所有不规则情况，那么您可能不想使用d3.time.scale，而是希望使用[另一个比例]。（强调矿山）

（注意：在他的回答中，Bostock使用的是v3.x。但是，v4的推理仍然相同）

因此，在您的情况下，更好的方法是创建一个波段刻度（），并像这样映射您的天数和小时数：

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位置的值：

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

---

使用它们作为定性（而非定量）值，使用您的波段标尺定位条形图。

不幸的是，您的两个要求

• “在D3 v4中创建仅显示工作时间的时间刻度和轴”
• “如果我有超过5天的数据，请将周末排除在外”

。。。如果使用时间刻度，则不可能实现

根据迈克·博斯托克（d3的创建者）的说法：

当您希望将时间显示为连续的定量变量时，应使用d3.time.scale，例如，当您希望考虑到由于夏时制的变化，天数可能在23-25小时之间，而由于闰年，年份可能在365-366天之间。如果您不想绘制连续的时间，以及我们正常日历单位中的所有不规则情况，那么您可能不想使用d3.time.scale，而是希望使用[另一个比例]。（强调矿山）

（注意：在他的回答中，Bostock使用的是v3.x。但是，v4的推理仍然相同）

因此，在您的情况下，更好的方法是创建一个波段刻度（），并像这样映射您的天数和小时数：

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位置的值：

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

---

使用它们作为定性（而非定量）值，使用您的波段刻度来定位条形图。

图形是否总是有12个条形图？从所选日期算起9天，从所选日期算起第二天算起3天，图形是否总是有12条线？从所选日期算起，第9天，第2天算起，第3天算起