React plotly - как программно выбирать точки данных? - PullRequest
Новая
       69

React plotly - как программно выбирать точки данных?

0 голосов
/ 14 июля 2020

Предположим, у меня нарисовано два графика реакции. Если пользователь выбирает некоторые точки данных с помощью поля выбора на одном графике, я хочу выбрать ту же точку данных на другом графике. Я мог бы найти соответствующую точку, выбранную на другом графике. Но проблема в том, что я хочу программно динамически выбирать точки данных. На прилагаемом ниже изображении я выбрал несколько точек данных, используя поле выбора на правом графике. то же самое следует выбрать и с левой стороны. Как можно выделить те же точки данных на другом графике? Любая помощь приветствуется. 

<Plot
data={this.state.scatterData}
layout={this.state.scatterLayout}
config={{ displaylogo: true }}
onClick={(data, e) => {
let selectedPoint = "";
// selectedPoint = data.points[0]['text'];
selectedPoint = data.points[0].text;
this.updateNode(selectedPoint);
}}
onSelected={this.onPointSelected.bind(this)}
/>;

onPointSelected = (data, e) => {
let pointColors = [...this.state.pointColors];
let scatterData = [...this.state.scatterData];

data.points &&
data.points.forEach((item) => {
  pointColors[item["pointIndex"]] = "#008000";
});

if (scatterData && scatterData.length > 0) {
scatterData.forEach((item) => {
  if (item.mode === "markers+lines") {
    item["marker"]["color"] = pointColors;
  }
});
}
this.setState({
  pointColors,
  scatterData,
});
};

введите описание изображения здесь

...