javascript - 在 JSX 中正确映射某些内容

Question

我有一个 json 数据，如下所示

0: (963) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
1: (964) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
2: (954) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},

我的数据如下所示

[0 … 99]
0: {y: 0, x: 10.7279501}
1: {y: 0, x: 10.73239994}
2: {y: 0, x: 10.73684978}
3: {y: 0, x: 10.7413168}
4: {y: 0, x: 10.74576664}
5: {y: 0, x: 10.7502327}

现在，我尝试使用plotly，react的plotly文档说明了这个例子

<Plot
        data={[
          {
            x: [1, 2, 3],
            y: [2, 6, 3],
            type: 'scatter',
            mode: 'lines+points',
            marker: {color: 'red'},
          },

      />

以上只是为了绘制单个图表的数据，但如果我这样做

      <Plot  
                data={[
                    {
                      x: [1, 2, 3],
                      y: [2, 6, 3],
                      type: 'scatter',
                      mode: 'lines+points',
                      marker: {color: 'red'},
                    },
                    {
                        x: [2, 5, 3],
                        y: [2, 8, 3],
                        type: 'scatter',
                        mode: 'lines+points',
                        marker: {color: 'red'},
                      }
                    ]}
                />

我可以绘制多个数据。

现在，有人可以帮助我映射我的数据，以便我可以创建多个图表吗？

或者至少有人可以帮我弄清楚如何使用 map 在数组内创建多个对象

{
//data 
}, 
{
//data1
}

我尝试过，但没有成功

data={[
                    this.graphdata.map((data, index) => ({

                            x: data["x"],
                            y: data["y"],
                            type: 'scatter',
                            mode: 'lines+points',
                            marker: {color: 'red'},
                }))

Answer 1

这是 J. Hesters 的扩展版本解决方案如上。
您必须将 .map 方法返回的新数组存储在新变量中，例如 plottableData。

const plottableData = graphdata.map(data => ({
    x: data.map(point => point.x),
    y: data.map(point => point.y),
    type: 'scatter',
    mode: 'lines+points',
    marker: { color: 'red' },
}));

然后，您可以在代码中使用 plottableData，如下所示 -

<Plot data={plottableData} />

或者

<Plot data={[...plottableData]} />

希望这也会有所帮助!