D3.JS ticks方法在使用日期的x轴上不起作用

我已经研究这个问题好几天了，还没有找到解决办法。我正试图绘制一张每天新冠新病例的图表，但有一年多的数据，我不能每天都打勾。不幸的是，到目前为止，我尝试的所有方法都没有限制x轴上的刻度数，结果非常糟糕

目前，这是我的x轴和刻度代码，我试图将刻度设置为每两个月一次

const xAxis = d3.axisBottom(x)
                .tickFormat(d3.timeFormat("%b"))
                .ticks(d3.timeMonth.every(2))

但是，我也尝试过通过如下操作将硬计数添加到滴答数：

const xAxis = d3.axisBottom(x)
                .tickFormat(d3.timeFormat("%b"))
                .ticks(5)

yAxisGroup.call(yAxis)
     .ticks(5)

不幸的是，在员工数量上增加员工人数对我也不起作用。我还尝试将代码移动到我调用x轴组的位置，以限制记号数，如下所示：

const xAxis = d3.axisBottom(x)
                .tickFormat(d3.timeFormat("%b"))
                .ticks(5)

yAxisGroup.call(yAxis)
     .ticks(5)

有人能告诉我我做错了什么吗

我不确定是否需要，但这里是整个组件的代码。整个项目正在进行中

import React, { Component } from 'react'
import * as d3 from 'd3'

export default class NewCasesGraph extends Component {

    componentDidUpdate = () => {
       
        let covidArray = Object.entries(this.props.data.cases);

        for(let i = covidArray.length - 1; i > 1; i--){
            let currentDay =parseInt(covidArray[i][1])
            let previousDay =parseInt((covidArray[(i-1)][1]) || 0)
            covidArray[i][1] = currentDay - previousDay
        }

        for(let j = 0; j <covidArray.length; j++){
            covidArray[j][0] = new Date(covidArray[j][0])
        }

        // console.log(covidArray)

        this.updateGraph(covidArray)
    }

    updateGraph(data){
        // console.log('data: ', data)
        
        // tweem
        const widthTween = (d) => {

            let i = d3.interpolate(0, x.bandwidth());

            return function (t){
                return i(t)
            }

        }

        // dimensions
        const dimensions = {
            height: 500,
            width: 1000
        }

        const margin = {top: 20, right: 20, bottom: 100, left: 100}



        const svg = d3.select('.canvas')
            .append('svg')
            .attr('width', dimensions.width)
            .attr('height',dimensions.height)

        const graphWidth = dimensions.width -margin.left - margin.right
        const graphHeight = dimensions.height - margin.top - margin.bottom

        // create graph
        const graph = svg.append('g')
            .attr('width', graphWidth)
            .attr('height', graphHeight)
            .attr('transform', `translate(${margin.left}, ${margin.top})`)

        const xAxisGroup = graph.append('g')
            .attr('transform', `translate(0, ${graphHeight})`);

        // set x axis text
        xAxisGroup.selectAll('text')
            .attr('transform', 'rotate(-40)')
            .attr('text-anchor', 'end')
            .attr('fill','grey')

        const yAxisGroup = graph.append('g');

        // create y scale
        const y = d3.scaleLinear()
            .range([ graphHeight, 0])

        // cretae a band scale
        const x = d3.scaleBand()
            .range([0, graphWidth])
            .paddingInner(0.2)
            .paddingOuter(0.2)

            // create the axae
            const xAxis = d3.axisBottom(x)
                .tickFormat(d3.timeFormat("%b"))
                .ticks(d3.timeMonth.every(2))

            const yAxis = d3.axisLeft(y)
                .ticks(4)
                .tickFormat(d =>  `${d.toLocaleString()} cases`);


            const t = d3.transition().duration(750)

            // join data to rects
            const rects = graph.selectAll('rect')
            .data(data)

            // remove exit selection
            rects.exit().remove();

            // update any scales (domains)
            y.domain([0,d3.max(data, d => d[1])]);
            x.domain(data.map(item => item[0]));

            // update current shapes in the dom
            rects.attr('width', x.bandwidth)
                .attr('fill', 'orange')
                .attr('x', (d) => x(d[0]))

         //handle enter selection
        // append the enter section to the DOM
        rects.enter()
            .append('rect')
            .attr('width', 0)
            .attr('height',0)
            .attr('y', graphHeight)
            .attr('fill', '#5FA19E')
            .attr('x', (d) => x(d[0]))
            .merge(rects)
            .transition(t)
            .attrTween('width', widthTween)
            .attr('y', (d) => {
                return y(d[1])
            })
            .attr('height', d => graphHeight - y(d[1]));

        // add mouseOver
        // graph.selectAll('rect')
        //     .on('mouseover',(event, d) =>{

        //     })

        // call axae
        xAxisGroup.call(xAxis);
        yAxisGroup.call(yAxis);

        console.log(svg)
    }
    render() {
        return (
            <div>
                <h2>New Cases Graph</h2>
                <div className="canvas">

                </div>
            </div>
        )
    }
}

import React，{Component}来自“React”
从“d3”导入*作为d3
导出默认类NewCasesGraph扩展组件{
componentDidUpdate=（）=>{
让covidArray=Object.entries（this.props.data.cases）；
对于（设i=covidArray.length-1；i>1；i--）{
设currentDay=parseInt（covidArray[i][1]）
让前一天=parseInt（（covidArray[（i-1）][1]）| | 0）
covidArray[i][1]=当前日期-前一天
}
对于（设j=0；j{
设i=d3.插值（0，x.带宽（））；
返回函数（t）{
返回i（t）
}
}
//尺寸
常量维度={
身高：500，
宽度：1000
}
常量边距={top:20，right:20，bottom:100，left:100}
const svg=d3.select（“.canvas”）
.append（'svg'）
.attr（'width'，dimensions.width）
.attr（'height'，dimensions.height）
常量图形宽度=尺寸.宽度-margin.left-margin.right
常量图形高度=尺寸.高度-边距.顶部-边距.底部
//创建图形
const graph=svg.append（'g'）
.attr（'width'，graphWidth）
.attr（'高度'，图形高度）
.attr（'transform'，'translate（${margin.left}，${margin.top}）`）
const xAxisGroup=graph.append（'g'）
.attr（'transform'，'translate（0，${graphHeight}）`）；
//设置x轴文本
xAxisGroup.selectAll（'text'）
.attr（'transform'、'rotate（-40'））
.attr（'text-anchor'，'end'）
.attr（'填充'，'灰色'）
const yAxisGroup=graph.append（'g'）；
//创建y比例
常数y=d3.scaleLinear（）
.范围（[graphHeight，0]）
//绉纹乐队音阶
常量x=d3.scaleBand（）
.范围（[0，图形宽度]）
.填充器（0.2）
.填充器（0.2）
//创建axae
常数xAxis=d3.axisBottom（x）
.tickFormat（d3.timeFormat（“%b”））
.滴答声（d3.时间月。每（2）次）
常数yAxis=d3轴左（y）
.滴答声（4）
.tickFormat（d=>`${d.tolocalString（）}个cases`）；
常量t=d3.transition（）.持续时间（750）
//将数据连接到rect
const rects=graph.selectAll（'rect'）
.数据（数据）
//删除退出选择
rects.exit（）.remove（）；
//更新任何比例（域）
y、 域（[0，d3.max（数据，d=>d[1]））；
x、 域（data.map（item=>item[0]）；
//更新dom中的当前形状
rects.attr（'width'，x.bandwidth）
.attr（'fill'，'orange'）
.attr（'x'，（d）=>x（d[0]））
//句柄输入选择
//将enter部分附加到DOM
rects.enter（）
.append（'rect'）
.attr（'width'，0）
.attr（'height'，0）
.attr（'y'，图高）
.attr（'fill'，'5FA19E'）
.attr（'x'，（d）=>x（d[0]））
.merge（rects）
.过渡（t）
.attrTween（'宽度'，宽度Tween）
.attr（'y'，（d）=>{
返回y（d[1]）
})
.attr（'height'，d=>graphHeight-y（d[1]）；
//添加鼠标盖
//graph.selectAll（'rect'）
//.on（'mouseover'，（事件，d）=>{
//     })
//打电话给axae
xAxisGroup.call（xAxis）；
yAxisGroup.call（yAxis）；
console.log（svg）
}
render（）{
返回(
新案例图
)
}
}

来自

记号的文档

如果刻度未实现scale.ticks（如带刻度和点刻度），则此方法无效。若要显式设置刻度值，请使用axis.tickValues。若要显式设置刻度格式，请使用axis.tickFormat。

因此，如果您的域包含一年中的每个日期，请使用以下方法限制勾号的数量

xAxis.tickValues(x.domain().filter((e,i)=>i%60==0));

前面回答了相同的问题。
这是意料之中的，因为您使用的是波段刻度。您可以更改刻度（对于时间刻度），也可以消除一些刻度，正如我解释和介绍的。