在D3 v4中创建工作时间timeScale？

Question

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

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

如果我有超过5天的数据并且可以放大或缩小到任意天数，我还需要在周末取出。

我可以使用时间间隔过滤功能取出不需要的刻度和标签，但timeScale本身仍会显示所有小时数。

Answer 1

不幸的是，你的要求都是......

  

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

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

根据Mike Bostock（d3的创造者）的说法：

  

当您希望将时间显示为连续的定量变量时，应使用d3.time.scale，例如当您想要考虑由于夏令时变化导致天数为23-25小时这一事实时由于闰年，年数可能在365-366天之间。如果你不想绘制连续时间，以及普通日历单元中的所有不规则，那么你可能不想使用d3.time.scale，并且想要[另一个比例]代替。 （强调我的）

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

因此，在您的情况下，更好的方法是创建一个带范围（d3.scaleBand()），并像这样映射您的日期和时间：

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...]

将它们用作定性（非定量）值，以使用您的波段标度来定位条形。

Answer 2

请检查小提琴 - https://jsfiddle.net/w9m2nob5/

如果您打算始终显示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];
        }));