d3fc 折线图不是从 y 轴开始

Question

我在 React 应用程序中有一个 d3fc webgl 折线图，由以下代码片段创建。

const ma = fc
        .indicatorMovingAverage()
        .value(d => d.value)
        .period(50)

    const maData = ma(data)

    const newData = data.map((d, i) => ({ ma: maData[i], ...d }))
    
    const strokeColorLineSeries = fc
        .webglStrokeColor()
        .data(newData)
        .value(d => [1, 1, 0, 1])

    const strokeColorMaSeries = fc
        .webglStrokeColor()
        .data(newData)
        .value(d => [1, 0, 0, 1])

    const lineSeries = fc
        .seriesWebglLine()
        .mainValue(d => d.value)
        .crossValue(d => d.timestamp)
        .lineWidth(3)
        .decorate(program => {
            strokeColorLineSeries(program);
        });

    const maLineSeries = fc
        .seriesWebglLine()
        .mainValue(d => d.ma)
        .crossValue(d => d.timestamp)
        .lineWidth(1.5)
        .decorate(program => {
            strokeColorMaSeries(program);
        });

    const areaSeries = fc
        .seriesWebglArea()
        .baseValue(d => 0)
        .mainValue(d => d.value)
        .crossValue(d => d.timestamp);

    const multi = fc
        .seriesWebglMulti()
        .series([areaSeries, lineSeries, maLineSeries]);

    const xExtent = fc
        .extentLinear()
        .accessors([d => d.timestamp]);

    const yExtent = fc
        .extentLinear()
        .accessors([d => d.value]);

    // TODO high border in xExtent and yExtent is a string, so padding does not work

    const chart = fc
        .chartCartesian(d3.scaleLinear(), d3.scaleLinear())
        .yOrient("left")
        .xDomain(xExtent(data))
        .yDomain(yExtent(data))
        .xLabel('Timestamp')
        .yLabel('value')
        .webglPlotArea(multi)

    const e1 = d3.select(el)
        .datum(newData)
        .call(chart);

然而，绘图从屏幕中间开始，而图表本身覆盖了整个屏幕。 The result looks like this:

This post describes the same problem, but the solution did not work for me