Question

寻找使用plotly.js实现自定义悬停的最佳方法以及反应。以下是plotly.js文档https://plot.ly/javascript/hover-events/

var myPlot = document.getElementById('myDiv'),
    hoverInfo = document.getElementById('hoverinfo'),
    d3 = Plotly.d3,
    N = 16,
    x = d3.range(N),
    y1 = d3.range(N).map( d3.random.normal() ),
    y2 = d3.range(N).map( d3.random.normal() ),
    data = [ { x:x, y:y1, type:'scatter', name:'Trial 1',
        mode:'markers', marker:{size:16} },
        { x:x, y:y2, type:'scatter', name:'Trial 2',
        mode:'markers', marker:{size:16} } ];
    layout = {
        hovermode:'closest',
        title:'Hover on Points'
     };

Plotly.plot('myDiv', data, layout);

myPlot.on('plotly_hover', function(data){
    var infotext = data.points.map(function(d){
      return (d.data.name+': x= '+d.x+', y= '+d.y.toPrecision(3));
    });

    hoverInfo.innerHTML = infotext.join('
');
})
 .on('plotly_unhover', function(data){
    hoverInfo.innerHTML = '';
});

但是当使用反应时，我不确定如何获得对#hoverInfo div的引用。有什么建议吗？

Answer 1

您可以使用ref

render() {
  <div id='hoverInfo' ref={ (el) => this.hoverInfo = el }>
  </div>
}

会在你的组件中为你提供一个引用到hoverInfo div的引用，它可以用于一个像plotly这样的库。

自定义使用plotly.js进行反应

1 个答案: