Reactjs nivo.rocks绘制图表不正确，线条与X-Y不对应

这是我传递给图表的数据

    [
    {
        "id": "cumulative emotion",
        "color": "blue",
        "data": [
            {
                "x": 1169,
                "y": 5
            },
            {
                "x": 1170,
                "y": 10
            },
            {
                "x": 1171,
                "y": 15
            },
            {
                "x": 1172,
                "y": 17
            },
            {
                "x": 1173,
                "y": 20
            },
            {
                "x": 1174,
                "y": 22
            },
            {
                "x": 1175,
                "y": 26
            },
            {
                "x": 1176,
                "y": 28
            },
            {
                "x": 1177,
                "y": 33
            },
            {
                "x": 1178,
                "y": 36
            },
            {
                "x": 1179,
                "y": 38
            },
            {
                "x": 1180,
                "y": 40
            },
            {
                "x": 1181,
                "y": 44
            },
            {
                "x": 1182,
                "y": 49
            },
            {
                "x": 1183,
                "y": 52
            },
            {
                "x": 1184,
                "y": 54
            },
            {
                "x": 1185,
                "y": 57
            },
            {
                "x": 1186,
                "y": 59
            },
            {
                "x": 1187,
                "y": 64
            }
        ]
    },
    {
        "id": "max potential accumulated emotion",
        "color": "green",
        "data": [
            {
                "x": 1169,
                "y": 0
            },
            {
                "x": 1170,
                "y": 5
            },
            {
                "x": 1171,
                "y": 10
            },
            {
                "x": 1172,
                "y": 15
            },
            {
                "x": 1173,
                "y": 20
            },
            {
                "x": 1174,
                "y": 25
            },
            {
                "x": 1175,
                "y": 30
            },
            {
                "x": 1176,
                "y": 35
            },
            {
                "x": 1177,
                "y": 40
            },
            {
                "x": 1178,
                "y": 45
            },
            {
                "x": 1179,
                "y": 50
            },
            {
                "x": 1180,
                "y": 55
            },
            {
                "x": 1181,
                "y": 60
            },
            {
                "x": 1182,
                "y": 65
            },
            {
                "x": 1183,
                "y": 70
            },
            {
                "x": 1184,
                "y": 75
            },
            {
                "x": 1185,
                "y": 80
            },
            {
                "x": 1186,
                "y": 85
            },
            {
                "x": 1187,
                "y": 90
            }
        ]
    }

]

这就是它最终的样子

由于某种原因，您可以观察到，红线是对红线y值+橙色线y值进行求和，而不是取其自身的值。即使在悬停时显示正确的值，从图形上看也不正确

---

有什么问题吗？

如果没有创建图形的代码，很难复制

在我看来，您的

yScale.stacked

属性可能为

true

，这是文档中的默认值。此堆叠行为对y轴上的值求和

在来自的堆叠行上