reactjs - チャートの予期しない動作

Question

アプリでチャートを描画するために Victory(-native) を使用していますが、次のような非常に基本的なチャートの動作がわかりません。

<VictoryChart
          containerComponent={<VictoryContainer />}

>



 <VictoryLine data={
  [
    {
      "x": 0,
      "y": 0.51
    },
    {
      "x": -1,
      "y": 1.59
    },

    {
      "x": -3,
      "y": 3.34
    },
    {
      "x": -4,
      "y": 4.08
    },
    {
      "x": -2,
      "y": 2.93
    },
    {
      "x": -6,
      "y": 6.7
    },
    {
      "x": -7,
      "y": 7.36
    },
    {
      "x": -8,
      "y": 8.79
    },
    {
      "x": -9,
      "y": 9.42
    },
    {
      "x": -10,
      "y": 10.09
    },
    {
      "x": -11,
      "y": 11.89
    },
    {
      "x": -12,
      "y": 12.56
    },
    {
      "x": -13,
      "y": 13.25
    },
    {
      "x": -14,
      "y": 14.85
    },
    {
      "x": -15,
      "y": 15.6
    },
    {
      "x": -16,
      "y": 16.82
    },
    {
      "x": -17,
      "y": 17.04
    },
    {
      "x": -18,
      "y": 18.31
    },
    {
      "x": -19,
      "y": 19.91
    },
    {
      "x": -20,
      "y": 20.82
    },
    {
      "x": -21,
      "y": 21.77
    },
    {
      "x": -22,
      "y": 22.94
    },
    {
      "x": -23,
      "y": 23.88
    },
    {
      "x": -24,
      "y": 24
    },
    {
      "x": -25,
      "y": 25
    },
    {
      "x": -26,
      "y": 26
    },
    {
      "x": -27,
      "y": 27
    },
    {
      "x": -28,
      "y": 28.34
    },
    {
      "x": -29,
      "y": 29.94
    },
    {
      "x": -30,
      "y": 30.34
    },
    {
      "x": -31,
      "y": 31.88
    },
    {
      "x": 32,
      "y": 32.48
    },
    {
      "x": -33,
      "y": 33.95
    },
    {
      "x": -34,
      "y": 34.7
    },
    {
      "x": -35,
      "y": 35.96
    }
  ]
  }/>
</VictoryChart>

予想される出力は、左上 (-36, 35) から右下 (0, 0) への線を示すチャートです。

実際の出力は次のとおりです。

データポイントはどこから来ますか?

コードをテストするには、FormidableLabsにアクセスして、チャートの下にコードを貼り付けます。