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

Question

如何将x轴值和标签放在图表中的两个刻度之间，如下面的屏幕截图所示？

每个刻度表示一个句点间隔的开始/结束日期（在这种情况下是一年中的一周），点和条表示该句点的值。

Answer 1

TL; DR - 有关正常工作的代码示例，请参阅我的D3区块here。

首先，x轴的比例必须是time scale：

    let xScale = d3.scaleTime()
        .domain([domainStartDate, domainEndDate]);

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

对于每个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类来以zig-zag替代方式隐藏和显示刻度线和标签：

JavaScript的：

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

CSS：

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

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

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