Plotly.js 激活悬停文本
Plotly.js Activate Hovertext
我正在使用 plotly 绘制一些点,如果这些点满足一个条件,我想要当你悬停在要显示的点附近时 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 :(
}
不幸的是,hovermode 的唯一选项似乎是:closest、x、y 和 false。
有什么方法可以激活hoverinfo吗?我知道我可以设置 mode = 'markers + text' 但它不是那么漂亮。
您可以使用 plotly_hover
事件并更改具有 class hoverlayer
的悬停信息的不透明度。它具有与您要求的相反的逻辑,即它隐藏了不需要的悬停信息,但它产生了相同的结果。
在下面的代码片段中,只有 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>
我正在使用 plotly 绘制一些点,如果这些点满足一个条件,我想要当你悬停在要显示的点附近时 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 :(
}
不幸的是,hovermode 的唯一选项似乎是:closest、x、y 和 false。
有什么方法可以激活hoverinfo吗?我知道我可以设置 mode = 'markers + text' 但它不是那么漂亮。
您可以使用 plotly_hover
事件并更改具有 class hoverlayer
的悬停信息的不透明度。它具有与您要求的相反的逻辑,即它隐藏了不需要的悬停信息,但它产生了相同的结果。
在下面的代码片段中,只有 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>