节点悬停效果

Posted

技术标签:

【中文标题】节点悬停效果【英文标题】:Node Hover Effect 【发布时间】:2019-04-24 09:15:50 【问题描述】:

当鼠标放在 networkx 生成的节点上时,我正在尝试显示节点属性(例如:单词)。有没有可能做到这一点。所有这些功能都应该在 PyQt5 应用程序中进行定制。

例子:

 #A bit of idea
    for i, elrow in df.iterrows():
        G.add_nodes(elrow[0], elrow[1], attr_dict=elrow[2:].to_dict(), weight=elrow(3)) #Just giving an instance

如何将attr_dict 中的所有数据作为鼠标悬停时的节点属性

【问题讨论】:

你能解释一下吗,节点在哪里显示?提供minimal reproducible example 关于节点,它们被绘制在 matplotlib 画布和图形中。所以,我希望节点显示更多关于悬停的信息。例如。 a, b, c, d, e 是节点,1, 2, 3, 4, 5 是边属性。我希望每个付费节点的属性具有悬停效果。 a:“詹姆斯”,b:“迈克尔”,c:“彼得”,d:“乔尔”,e:“史密斯”。所有这些名字都是我想要显示的。无法提供图片示例,因为我不知道如何 提供一个 MCVE.... 【参考方案1】:

您应该使用bokeh 库进行这种可视化。

您可以为您的问题找到准确的解决方案here:

import networkx as nx

from bokeh.io import show, output_file
from bokeh.models import Plot, Range1d, MultiLine, Circle, HoverTool, BoxZoomTool, ResetTool
from bokeh.models.graphs import from_networkx
from bokeh.palettes import Spectral4

# Prepare Data
G = nx.karate_club_graph()

SAME_CLUB_COLOR, DIFFERENT_CLUB_COLOR = "black", "red"
edge_attrs = 

for start_node, end_node, _ in G.edges(data=True):
    edge_color = SAME_CLUB_COLOR if G.nodes[start_node]["club"] == G.nodes[end_node]["club"] else DIFFERENT_CLUB_COLOR
    edge_attrs[(start_node, end_node)] = edge_color

nx.set_edge_attributes(G, edge_attrs, "edge_color")

# Show with Bokeh
plot = Plot(plot_width=400, plot_height=400,
            x_range=Range1d(-1.1, 1.1), y_range=Range1d(-1.1, 1.1))
plot.title.text = "Graph Interaction Demonstration"

node_hover_tool = HoverTool(tooltips=[("index", "@index"), ("club", "@club")])
plot.add_tools(node_hover_tool, BoxZoomTool(), ResetTool())

graph_renderer = from_networkx(G, nx.spring_layout, scale=1, center=(0, 0))

graph_renderer.node_renderer.glyph = Circle(size=15, fill_color=Spectral4[0])
graph_renderer.edge_renderer.glyph = MultiLine(line_color="edge_color", line_alpha=0.8, line_width=1)
plot.renderers.append(graph_renderer)

output_file("interactive_graphs.html")
show(plot)

【讨论】:

如何在 PyQt5 应用程序中实现这一点?一切都将显示在 matplotlib 画布上,并附有图形空间。 散景返回 HTML sn-p。您可以使用 QWebEngine 将其可视化。 按照现在的方式很难实现。我已经有一个应用程序 GUI 流程,并且不想更改它以实现散景功能。如果你认为你能找到工作,我在 Github 上有吗?? QWebView 小部件将为您提供帮助 - 您可以将 Bokeh 生成的 HTML 发送到其中并在应用程序中可视化。我只使用 Qt,而不使用 PyQt,所以我无法帮助您如何在 Python 代码中进行操作。但在 C++ Qt 中它应该可以工作。 刚刚阅读 QWebView for python 并看到支持显示散景生成的 HTML 存在问题。除此之外,您是否遇到过将箭头方向从一个节点更改为另一个节点并自动反映在最初生成图表的电子表格中的能力

以上是关于节点悬停效果的主要内容,如果未能解决你的问题,请参考以下文章

如何使悬停在活动按钮上不使用悬停效果?

HTML图片鼠标悬停效果设置!

HTML+CSS制作鼠标悬停效果

悬停在文本上时,悬停效果消失

悬停在一个元素上会导致使用jQuery对其他元素产生悬停效果

css CSS动画悬停 - 菜单悬停的效果