Nivo 条形图轴标签重叠

【问题标题】：Nivo bar chart axis labels overlappingNivo 条形图轴标签重叠
【发布时间】：2021-02-18 18:18:46
【问题描述】：

我正在使用@nivo/bar: "0.63.1" 来生成一个以“YYYYMMDD”格式接收日期的图表。当图表变大时，如何通过每 7 天或每 30 天等显示一次来防止 x 轴标签重叠？我已经尝试添加 tickValues 并且它没有做任何事情。

        axisBottom={{
            tickValues: 7,
            format: function (value) {
                return moment(value).format('DD');
            },
        }}

【问题讨论】：

标签： javascript d3.js charts nivo-slider

【解决方案1】：

一种解决方法是创建一个函数并在日期不是星期一时返回一个空字符串：

const isMonday = value => moment(value).day() === 1;

axisBottom={{
    format: function (value) {
        return isMonday(value) ? moment(value).format('DD') : "";
    },
    tickSize: function (value) {
        return isMonday(value) ? 5 : 0;
    },
}}

【讨论】：