javascript - d3 ticks 函数不返回与输入/参数中指定的相同数量的时间刻度。（反应 JS）

Question

我正在尝试在 React JS 中构建一个响应式图表，但我对 D3 不是很熟悉。我注意到在我的代码中，刻度函数不会返回与我指定的相同数量的刻度。这是我的代码：

 const pixelsPerTick = 90;

    const xScale = d3.scaleTime()
        .domain([moment(xDomain[0]).toDate(), moment(xDomain[1]).toDate()])
        .range(xRange);

    const getXOffset = value => xScale(moment(value).toDate());
    const getYOffset = value => {
        const elementIndex = yDomain.findIndex(item => item === value);
        return (elementIndex + 1) * 50;
    };
    const numberOfTicksTarget = Math.max(
        1,
        Math.floor(
            (xRange[1] - xRange[0]) / pixelsPerTick
        )
    );

    const xTicks = useMemo(() => {

        return xScale.tickValues(numberOfTicksTarget)
            .map(value => ({
                value,
                xOffset: xScale(moment(value).toDate());
            }));
    }, [
        xDomain.join("-"),
        xRange.join("-")
    ]);

另外即使我写了const pixelPerTick = 90; 每个刻度的像素似乎并不总是相同的。此外，如果 numberOfTicksTarget为 11，xTicks返回一个包含 11 个元素的数组。

标签： javascriptreactjsd3.jscharts