javascript - Plotly.js激活悬浮文本

我正在使用plotly绘制一些点，如果这些点满足条件，我希望当您将鼠标悬停在要显示的点附近时，hoverinfo会以图形方式显示。

所需的伪代码

z = {'x': x_val, 'y': y_val , 'type' : 'scatter' , 'mode' : 'markers',
'hoverinfo': 'text', 'hovermode' : 'closest'}
z['text'] = text

// check condition
if ( condition)
{
    z['hovermode'] = 'on' //plotly doesn't have 'on' as a setting :(
}

不幸的是，悬停模式的唯一选项似乎是：最接近，x，y和false。

有什么办法可以激活hoverinfo吗？我知道我可以将mode设置为'markers + text'，但这不是很漂亮。

最佳答案

您可以使用plotly_hover事件并更改具有类hoverlayer的hoverinfo的不透明度。它与您要的内容具有相反的逻辑，即，它隐藏了不需要的hoverinfo，但产生的结果相同。

在下面的代码段中，只有y值大于2的点具有hoverinfo。

var data = [
  {
    x: [0, .5, 1, 1.5, 2],
    y: [1, 3, 2, 4, 2],
    mode: 'markers',
    marker: {size:16},
    text: ['Text A', 'Text B', 'Text C', 'Text D', 'Text E'],
    type: 'scatter'
  }
];
Plotly.newPlot('myDiv', data);

var myPlot = document.getElementById('myDiv');
myPlot.on('plotly_hover', function(data){
  var infotext = data.points.map(function(d){
    Plotly.d3.selectAll(".hoverlayer").style("opacity", (d.y > 2) ? 1: 0);
  });
});

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width: 100%; height: 500px;"></div>