Javascript D3-如何在两个刻度之间放置x轴值和标签

如何将x轴值和标签放在下图中两个刻度之间

---

每个勾号表示时段间隔（本例中为一年中的一周）的开始/结束日期，点和条表示时段的值

TL；DR-有关工作代码示例，请参阅我的D3块

---

首先，x轴的比例必须为：

在D3中，每个轴记号都有一个用于绘制记号线的线元素和一个用于记号标签的文本元素（请参阅）。一旦我们理解了这一点，下面的解决方案将变得更加清晰：

对于每个x值，我们生成两个刻度。第一个勾号表示期间的中间日期，第二个勾号表示期间的结束日期。请注意，一个期间的结束日期也是下一个期间的开始日期。最后，我们将以交替方式隐藏和显示刻度线和标签

    let tickValues = values
        .map((value) => [value.midDate, value.endDate])
        .reduce((acc, cur) => {
            return acc.concat(cur);
        }, []);

接下来，我们使用上面的

xScale

和

tickValues

构建轴生成器：

    let xAxisWeekGenerator = d3.axisBottom(xScale)
        .tickValues(tickValues)
        .tickSize(10)
        .tickPadding(5)
        .tickFormat((d, i) => {
            // specify the text label to be returned here.

            let index = Math.floor(i / 2);
            return values[index].Week;
        });

在svg上调用轴生成器：

    let xAxisWeekUi = svg.append('g')
        .attr('id', 'xAxisWeek')
        .attr('transform', `translate(0, ${height})`)
        .call(xAxisWeekGenerator);

现在，如果您在浏览器中查看页面，您将看到每个值的重复x轴刻度线和标签

我们只需要应用一些CSS类，以Z字形交替方式隐藏和显示刻度线和标签：

JavaScript:

    xAxisWeekUi.selectAll('.tick')
        .attr('class', (d, i) => {
            if (i % 2 === 0) {
                return 'tick midWeek';
            }
            return 'tick endWeek';
        });

CSS:

x值标签位于刻度线之间的最终输出：

    xAxisWeekUi.selectAll('.tick')
        .attr('class', (d, i) => {
            if (i % 2 === 0) {
                return 'tick midWeek';
            }
            return 'tick endWeek';
        });

/* hide the midWeek tick line. */
#xAxisWeek .tick.midWeek line {
    display: none;
}

/* hide the endWeek tick label. */
#xAxisWeek .tick.endWeek text {
    display: none;
}