Javascript 堆叠条形图24小时@15分钟数据，仅显示2小时刻度

我已经搜索了一段时间关于如何处理堆叠条形图中的X轴（因为数据集与单个条形图略有不同）

基本上，我有15分钟间隔24小时的数据。但是，我只希望以2小时刻度显示x轴

现有小提琴：[

它当前打印所有间隔

我用

时间

尝试了各种缩放选项，但有些东西与我的设置方式不符

var xScale = d3.scale.ordinal()
  .domain(dataset[0].map(function(d) {
    return d.x;
  }))
  .rangeRoundBands([0, width - margin.left]);

var xAxis = d3.svg.axis()
  .scale(xScale)
  .orient('bottom')
  .tickSize(0)
  .ticks(12)
  .tickFormat(function(d) {
    return d;
  });
var rect = groups.selectAll('rect')
  .data(function(d) {
    return d;
  })
  .enter()
  .append('rect')
  .attr('class', function(d, i) {
    return 'stacks ' + d.type;
  })
  .classed('stacks', true)
  .attr('id', function(d, i) {
    return d.type + '_' + i;
  })
  .attr('x', function(d) {
    return xScale(d.x);
  })
  .attr('y', function(d) {
    return yScale(d.y0 + d.y);
  })
  .attr('height', function(d) {
    return yScale(d.y0) - yScale(d.y0 + d.y);
  })
  .attr('width', xScale.rangeBand());

  [1]: https://jsfiddle.net/lucksp/crwb4v5u/

---

我知道这是用户错误，但在看了这两天之后，我现在开始问这个问题。谢谢！

您当前正在尝试使用

。ticks

只有在您使用的刻度具有内置的ticks函数时才会起作用。在这种情况下，您的顺序刻度不起作用。默认情况下，它将使用dom中的所有值艾因

为了解决这个问题，我们可以使用

xAxis.tickValues（[“与域VAL匹配的自定义tick值]）

手动设置tick。请查看下面的代码片段

var data=[{“hour”：“0:00”，“inProgress”：3，“inQueue”：0}，{“hour”：“0:15”，“inProgress”：5，“inQueue”：3}，{“hour”：“0:30”，“inProgress”：1，“inQueue”：1，{“hour”：“0:45”，“inProgress”：1，“inQueue”：0}，{“hour”：“1:00”，“inProgress”：2，“inQueue”：0}，{“hour”：“1:15”，“inProgress”：8，“inQueue”：2，{“hour”：“1:30”，“inProgress”：“inProgress”：“inProgress”：“1:45”，“inProgress”：，“inQueue”：1，{“hour”：“2:00”，“inProgress”：6，“inQueue”：0，{“hour”：“2:15”，“inProgress”：6，“inQueue”：0，{“hour”：“2:30”，“inProgress”：7，“inQueue”：0，{“hour”：“3:00”，“inProgress”：8，“inQueue”：0，{“hour”：“3:15”，“inProgress”：8，“inQueue”：0，{“hour”：“hour”：“inProgress”：“inProgress”：3:30”，“inProgress”：“inProgress”：“inProgress”：“inProgress”：“inProgress”7，“inQueue”：“inQueue”：“inProgress”：“inProgress”：“inProgress”：“inProgress”：“3:45”，“inProgress”：inQueue:4}，{“小时”：“4:00”，“inProgress:10”，“inQueue:6}，{“小时”：“4:15”，“inProgress:10”，“inQueue:2}，{“小时”：“4:30”，“inProgress:10”，“inQueue:1}，{“小时”：“4:45”，“inProgress:11”，“inQueue:0}，{“小时”：“5:00”，“inProgress:11”，“inQueue:0”，“inQueue:15”，“inProgress:12”，“inQueue:0”，“5:15”，“inProgress:30”，“inProgress:45”，“inProgress:45:{”小时“：13，”inQueue:0}，{“hour”：“6:00”，“inProgress:13”，“inQueue:0}，{“hour”：“6:15”，“inProgress:14”，“inQueue:0}，{“hour”：“6:30”，“inProgress:14”，“inQueue:0}，{“hour”：“6:45”，“inProgress:15”，“inQueue:0}，{“hour”：“7:00”，“inQueue:15”，“inQueue:3”，“inQueue:1”，“inProgress:15”，“inQueue:1”，“inProgress:30”，“inProgress:15”，“inProgress:16”，“inProgress:15”，“inQueue:15”，“inQueue:15”，“inQueue:15”，“inProgress”{，“inProgress”：16，“inQueue”：0，{“hour”：“8:00”，“inProgress”：17，“inQueue”：2，{“hour”：“8:15”，“inProgress”：17，“inQueue”：3，{“hour”：“8:30”，“inProgress”：18，“inQueue”：“8:45”，“inProgress”：0，{“hour”：“9:00”，“inProgress”：19，“inQueue”：0，{“hour”：“9:15”，“inProgress”：19，“inQueue”：“inQueue”：“inQueue”：“8:45”，“inQueue”：“inProgress”：18”，“inQueue”：“inProgress”：“8:45”，“inProgress”：“inQueue”：“inProgress”：“inProgress”：“9:20”，“inProgress”：9:45，inProgress:20，inQueue:0，{hour:“10:00”，“inProgress:20”，inQueue:0，{hour:“10:15”，“inProgress:21”，“inQueue:1}，{hour:“10:30”，“inProgress:21”，“inQueue:4}，{”hour:“10:45”，“inProgress:22”，“inQueue:11:00”，“inProgress:22”，“inQueue:2}，{”hour:“11:15”，“inProgress:23”，“inQueue:11”，“inProgress:23”，“inQueue:23”，“inProgress:23”，“inQueue:23”，“inProgress:23”，“inQueue:23”，“inProgress:23”，“inQueue:23”，“inQueue:23”，“inProgress:20”，“inQueue:20”，“inque，{“小时”：“11:45”，“进行中”：3，“进行中”：0}，{“小时”：“12:00”，“进行中”：5，“进行中”：0}，{“小时”：“12:15”，“进行中”：1，“进行中”：0}，{“小时”：“12:30”，“进行中”：1，“进行中”：0}，{“小时”：“12:45”，“进行中”：2，“进行中”：0}，{“小时”：“13:00”，“进行中”：8，“进行中”：0}，{“小时”：“13:15”，“进行中”：5，“进行中”：1，“进行中”：0}，{“进行中：13:15”，“进行中”：5，“进行中：5”，“进行中”：5}，{“进行中：{“：0，{”hour“：”13:45“，”inProgress“：”6，“inQueue“：3，{”hour“：”14:00“，”inProgress“：”6，“inQueue“：”14:15“，”inProgress“：”7，“inQueue“：”14:30“，”inProgress“：”7，“inQueue“，”14:45“，”inProgress“：”8，“inQueue“，”2，{”15:00“，”inProgress“：”8，“inQueue“：”3，{”15:15“，”15:15“，”inProgress“，”9“，”inProgress“，”，“inQueue”：0}，{“hour”：“15:45”，“inProgress”：10，“inQueue”：0}，{“hour”：“16:00”，“inProgress”：10，“inQueue”：0}，{“hour”：“16:30”，“inProgress”：11，“inQueue”：0}，{“hour”：“16:45”，“inProgress”：11，“inQueue”：0}，{“hour”：“17:00”，“inProgress”：12，“inQueue”：1，{“hour”：“hour”：“inProgress”：“inQueue”：17:15”，“inProgress”：“inProgress”，“inProgress”：“inProgress”：“inQueue”：“17:30”，“inProgress”：inProgress:13，“inQueue:6}，{“hour”：“17:45”，“inProgress:13”，“inQueue:2}，{“hour”：“18:00”，“inProgress:14”，“inQueue:1}，{“hour”：“18:15”，“inProgress:14”，“inQueue:0}，{“hour”：“18:30”，“inProgress:15”，“inQueue:18:45”，“inProgress:15”，“inQueue:0}，{“hour”：“inQueue:19:00”，“inProgress:15”，“inQueue:0”，“inQueue:15”，“inQueue:16}”“：”19:30“，”inProgress“：”16“，”inQueue“：”0}，{”hour“：”19:45“，”inProgress“：”17“，”inQueue“：”0}，{”hour“：”20:15“，”inProgress“：”18“，”inQueue“：”0}，{”hour“，”20:30“，”inProgress“：”18“，”inQueue“：”3}，{”hour“：”20:45“，”inProgress“，”19“，”inQueue“：”21:00”，“inProgress“，”19“，”inQueue“，”inQueue“，”21:15“，”inProgress“，”inQueue“，”inProgress“，”inProgress“，”inQueue“：0，{“小时”：“21:30”，“正在进行中”：20，“正在排队”：2，{“小时”：“21:45”，“正在进行中”：20，“正在排队”：3，{“小时”：“22:00”，“正在进行中”：21，“正在排队”：1，{“小时”：“22:15”，“正在进行中”：21，“正在排队”：0，{“小时”：“22:30”，“正在进行中”：22，“正在排队”：0，{“小时”：“22”，“正在进行中”：22，“正在进行中”：0，{“小时”：“23:00”，“正在进行中”：23，{“正在进行中”：23，{：23，“inQueue:0}，{“hour”：“23:30”，“inProgress:1”，“inQueue:0}，{“hour”：“23:45”，“inProgress:2”，“inQueue:1}]；
var margin={顶部：20，右侧：50，底部：30，左侧：20}，
宽度=500，
高度=300；
//将数据转换为层
var dataset=d3.layout.stack（）（['inProgress'，'inQueue'].map（函数（类型））{
返回数据.map（函数（d）{
返回{
x:d.hour，
y:+d[类型]，
类型：类型
};
});
}));
var svg=d3。选择（'svg'），
边距={顶部：40，右侧：10，底部：20，左侧：10}，
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom，
g=svg.append（“g”）.attr（“transform”、“translate”（+margin.left+）、“+margin.top+”）；
//集合x，y和colo