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

【问题标题】：D3 - How do I put x-axis value and labels between two ticksD3 - 如何在两个刻度之间放置 x 轴值和标签
【发布时间】：2018-01-02 08:14:27
【问题描述】：

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

每个刻度代表一个周期间隔的开始/结束日期（在本例中为一年中的一周），点和条表示该周期的值。

【问题讨论】：

标签： javascript d3.js charts

【解决方案1】：

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

首先，x 轴的刻度必须是time scale：

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

在 D3 中，每个轴刻度都有一个用于绘制刻度线的 line 元素和一个用于刻度标签的文本元素（请参阅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 类来以锯齿形交替方式隐藏和显示刻度线和标签：

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 值标签位于刻度线之间的最终输出：

【讨论】：