d3fc 折线图不是从 y 轴开始

如何解决d3fc 折线图不是从 y 轴开始

我在 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,1])

    const strokeColorMaSeries = fc
        .webglstrokeColor()
        .data(newData)
        .value(d => [1,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