Plotly.js Hovertextをアクティブにする

Question

私はプロットしていくつかのポイントをプロットしています。これらのポイントが条件を満たしていれば、表示するポイントの近くをホバーするとプロットする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 :(
} 

残念なことにhovermodeための唯一のオプションがあるように見える：最も近い、X、Y、および偽。

hoverinfoを有効にする方法はありますか？私はモード= 'マーカー+テキスト'を設定することができますが、それほど美しくはありません。

Answer 1

イベントplotly_hoverを使用し、クラスhoverlayerのhoverinfoの不透明度を変更することができます。それは望ましくないホバーインフォを隠すなど、あなたが求めているのと逆の論理を持ちますが、同じ結果をもたらします。

以下のスニペットでは、y値が2以上のドットのみがホバリング情報を持っています。

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>