首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Plotly.js激活Hovertext

Plotly.js激活Hovertext
EN

Stack Overflow用户
提问于 2016-10-21 21:59:19
回答 1查看 1.2K关注 0票数 0

我用巧妙的方法来绘制一些点,如果这些点满足一个条件,我想要一个悬停信息,当你在点附近悬停显示时,它会被巧妙地显示出来。

期望伪码

代码语言:javascript
复制
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吗?我知道我可以设置模式=‘标记+文本’,但它没有那么漂亮。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-11-30 22:47:21

您可以使用plotly_hover事件并更改包含类hoverlayer的hoverinfo的不透明度。它具有与您所要求的相反的逻辑,即它隐藏了不受欢迎的hoverinfo,但是它产生了相同的结果。

在下面的片段中,只有y值大于2的点才有一个hoverinfo。

代码语言:javascript
复制
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);
  });
});
代码语言:javascript
复制
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width: 100%; height: 500px;"></div>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/40186023

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档