Javascript D3中的交替轴线颜色

我正在使用D3（v4）并试图创建一个X轴，每个刻度之间有交替的颜色条。这就是我试图模仿的：

目前我有一个X轴，每个小时都有刻度，就像我想要的那样

const hoursBarAxis = axisBottom(this.xScale)
  .ticks(timeHour, 1)
  .tickSize(5)
  .tickPadding(36)
  .tickFormat('');

this.graph.append('g')
      .attr('transform', 'translate(' + this.xOffset + ',' + height + ')')
      .call(hoursBarAxis);

看起来是这样的：

第一次尝试： 执行了与此示例类似的操作：

我在每个记号后插入一个矩形，在每个记号之间画一个矩形（下面紫色和灰色交替）。这让我非常接近我想要的结果，但我的困境是如何处理轴的开始和结束（第一个勾号之前的部分和最后一个勾号之后的rect太长的事实）

其他尝试： 我曾经尝试过许多其他方法，每次添加一个轴，并使用各种CSS技巧在勾号后添加项目，但没有一种方法能够正确地工作或解决我的问题

所以我的问题是…有没有更简单的方法来解决我没有看到的问题？专注于改变节拍似乎是一个错误的想法，因为这不能处理第一次节拍之前的第一个片段

---

提前谢谢

首先，我们尝试使用一种简单的解决方案，它依赖于axis generator为每个刻度创建一个这样的结构（不介意值，只关心结构）：

然后，我们使用这个数学来附加矩形：

d3.select(this).append("rect")
    .attr("width", this.nextSibling.firstChild.getBoundingClientRect().x -
        this.firstChild.getBoundingClientRect().x)
    .attr("height", 6)
    .style("fill", i % 2 ? "green" : "red");

在本例中，我使用刻度的索引将矩形绘制为“绿色”或“红色”。注意：魔法数字

6

只是D3中刻度的默认高度。相应地改变它

以下是演示：

var svg=d3.选择（“svg”）；
var scale=d3.scaleLinear（）
.domain（[01100]）
.范围（[20480]）；
var轴=d3.轴底（刻度）；
var gX=svg.append（“g”）
.attr（“类”、“轴”）
.attr（“变换”、“平移（0,50）”）
.呼叫（安讯士）；
gX.选择全部（“.勾选”）。每个（功能（d，i）{
如果（此.nextSibling）{
d3.选择（this）.append（“rect”）
.attr（“宽度”，this.nextSibling.firstChild.getBoundingClientRect（）.x-this.firstChild.getBoundingClientRect（）.x）
.attr（“高度”，6）
.样式（“填充”，i%2？“绿色”：“红色”）；
}
});
这是为我做的，谢谢！我确实需要做一个小小的改变，因为我的是UTC（时间）刻度，我需要每小时都有刻度。因此，如果有人感兴趣：
.tickValues（this.xScale.ticks（timeHour，1）.concat（this.xScale.domain（））
if (this.nextSibling) {

d3.select(this).append("rect")
    .attr("width", this.nextSibling.firstChild.getBoundingClientRect().x -
        this.firstChild.getBoundingClientRect().x)
    .attr("height", 6)
    .style("fill", i % 2 ? "green" : "red");