Блог

У меня есть div, который содержит мою диаграмму в Plot.ly . При просмотре документации React было рекомендовано использовать addEventListener в componentDidMount, поэтому я прикрепил к своей диаграмме событие plotly через addEventListener.

this.refs.chart.addEventListener('plotly_selected', this._lasso_selection);

Однако, когда я выбираю некоторые точки на своем графике, ничего не отображается. Аналогично, если я попытаюсь:

this.refs.chart.on('plotly_selected', this._lasso_selection);

Похоже, это не работает в коде моего компонента.

Однако, когда я пытаюсь запустить код в консоли, addEventListener, похоже, не работает, в то время как .on работает. Я проверил ссылку на this.refs.chart, и она правильная [т. Е. такая же, как та, которую я беру в консоли]

Как я могу использовать событие plotly_selected в моем компоненте? Более того, почему я не могу просто добавить событие .on в componentDidMount и заставить его работать так, как это происходит в консоли?

Поскольку Plot.ly Для API требуется узел DOM для диаграммы, передачи ему ссылки будет недостаточно. Я не уверен на 100%, что это лучшая практика, но простое решение — добавить .getDOMNode() в ссылку. Вот простой пример:

 class Example extends React.Component {
  componentDidMount() {
    const chart = this.refs.chart.getDOMNode();
    
    var data = [
      {
        x: ['giraffes', 'orangutans', 'monkeys'],
        y: [20, 14, 23],
        type: 'bar'
      }
    ];

    Plotly.newPlot(chart, data);
    chart.on('plotly_hover', this.handleEvent);   
  }
  handleEvent() {
    console.log('Event!')
  }
  render() {
    return(
      <div ref="chart" id="chart" />
    );
  }

}

React.render(<Example/>, document.getElementById('View'));  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script>
<script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script>

<div id="View"></div>