ReactJs多图问题

Question

我正在尝试使用plotly生成多个图并反应js。第一次加载时一切都很好，我在每个图上的所有点都位于正确的位置。但是，当我更新或单击任何一个绘图时，正是更新其他绘图的范围，这导致所有绘图的点位置发生了变化。

我尝试为每个图添加唯一的divId，但这没有用。

我正在使用以下功能来动态生成图。

getScatterPlot(scatterPlotData){
        const {splittedScatterPlotLayouts} = this.state;
        let columns = [];
        for(let p in scatterPlotData){
            let data = scatterPlotData[p];
            let plotData = {my data object};
            columns.push(
                <div key={p} className={"col-6"} style={{width: "50%", height:"25%"}}>                 
                    {this.getScatterPlot(Object.assign([],plotData), p)}
                </div>
            )
        }
        return(
            <div key={""} id={"splitted-plot-row"} tabIndex={0} className={"row"}>{columns}</div>
        )
    }

getScatterPlot(scatterPlotData, divId){
        const {splittedScatterPlotLayouts} = this.state;
        return (
            <Plotly
                divId={divId}
                data={scatterPlotData}
                layout={splittedScatterPlotLayouts.layout}
                frames={splittedScatterPlotLayouts.frames}
                config={splittedScatterPlotLayouts.config}
                useResizeHandler={true}
                style={{height:'100%', width:'100%'}}
                onSelected={(selectedPoints) => {
                    this.onPointsSelection(selectedPoints)
                }}
                onDeselect={() => {
                    this.onPointsDeselection();
                }}
            />
        )
    }

我尝试从每个图的splittedScatterPlotLayouts.layout克隆布局，但是没有用。

我希望更新重点关注的情节。有经验的人可以帮我调试吗？