python-3.x 我们如何在浏览器中使用pyvis绘制网络图?

hyrbngr7  于 2023-10-21  发布在  Python
关注(0)|答案(1)|浏览(254)

当我运行下面的代码时,我得到这个消息,但没有显示网络图。

警告:当cdn_resources为“local”时,jupyter notebook在Chrome/safari上显示图形时出现问题。如果在查看笔记本中的图形时遇到问题,请使用cdn_resources ='in_line'或cdn_resources ='remote'。example.html

import pandas as pd
import numpy as np
import networkx as nx
import matplotlib.pyplot as plt

data = [{'Circuit': 'html','Description':1, 'Duration':10.2, 'Source':'Westchester', 'Destination':'Davie', 'Picklist':1000, 'Postlist':50000.2}, 
       {'Circuit': 'html', 'Description':2, 'Duration':12.1, 'Source':'Westchester', 'Destination':'Davie', 'Picklist':3000, 'Postlist':40000.1},
       {'Circuit': 'html', 'Description':3, 'Duration':11.3, 'Source':'Westchester', 'Destination':'Davie', 'Picklist':7000, 'Postlist':50000.2}, 
       {'Circuit': 'html', 'Description':3, 'Duration':8.1, 'Source':'West', 'Destination':'San Bernardino', 'Picklist':3000, 'Postlist':40000.0},
       {'Circuit': '.net', 'Description':4, 'Duration':6.2, 'Source':'Queens', 'Destination':'San Bernardino', 'Picklist':5000, 'Postlist':6000.1}, 
       {'Circuit': '.net', 'Description':3, 'Duration':20.1, 'Source':'Queens', 'Destination':'Los Angeles', 'Picklist':5000, 'Postlist':4000.1},
       {'Circuit': '.net', 'Description':2, 'Duration':15.5, 'Source':'Brooklyn', 'Destination':'San Francisco', 'Picklist':5000, 'Postlist':9000.3},
       {'Circuit': '.net', 'Description':4, 'Duration':7.7, 'Source':'Brooklyn', 'Destination':'Davie', 'Picklist':6000, 'Postlist':10000},
       {'Circuit': '.net', 'Description':4, 'Duration':7.7, 'Source':'Los Angeles', 'Destination':'Westchester', 'Picklist':6000, 'Postlist':10000},
       {'Circuit': '.net', 'Description':4, 'Duration':7.7, 'Source':'San Berdarnino', 'Destination':'Westchester', 'Picklist':6000, 'Postlist':10000}]
df = pd.DataFrame(data)
df

import pandas as pd
import networkx as nx
import matplotlib.pyplot as plt

G = nx.from_pandas_edgelist(df, source='Source', target='Destination', edge_attr='Picklist')

from pyvis.network import Network
net = Network(notebook=True)
net.from_nx(G)
net.show('example.html')

如果我在下面添加这段代码,我会得到一个静态图,但我真的需要使用上面的代码的动态图。

G = nx.from_pandas_edgelist(pandas_df, source = "StorageLocation", target = "StorageType", edge_attr = "Value", create_using = nx.Graph())
plt.figure(figsize=(15,12))

nx.draw(G, with_labels=True, node_color='skyblue', edge_cmap=plt.cm.Blues)
plt.show()
js5cn81o

js5cn81o1#

我不知道你在问什么,因为它告诉你该做什么,以及如何去做。
“如果在查看笔记本中的图形时遇到问题,请使用cdn_resources ='in_line'或cdn_resources ='remote'。示例. html”
下面是如何在浏览器中查看您的代码的适应工作交互式(您可以滚动和缩放),而不是静态图像,无需在您自己的系统上安装任何东西。
转到here并按下底部的“启动活页夹”徽章。会议将开始。(如果系统似乎需要很长时间才能“启动”,try this link in case of issues。)当会话启动时,打开一个新的笔记本,并在该笔记本中的新单元格中运行以下代码:

%pip install pyvis

运行完成后,重启内核
现在你可以试着运行你的代码的改编版本了。
根据这里的建议和示例,修改代码版本以在那里运行:

import pandas as pd
import numpy as np
import networkx as nx
from IPython.display import display, HTML
import matplotlib.pyplot as plt

data = [{'Circuit': 'html','Description':1, 'Duration':10.2, 'Source':'Westchester', 'Destination':'Davie', 'Picklist':1000, 'Postlist':50000.2}, 
       {'Circuit': 'html', 'Description':2, 'Duration':12.1, 'Source':'Westchester', 'Destination':'Davie', 'Picklist':3000, 'Postlist':40000.1},
       {'Circuit': 'html', 'Description':3, 'Duration':11.3, 'Source':'Westchester', 'Destination':'Davie', 'Picklist':7000, 'Postlist':50000.2}, 
       {'Circuit': 'html', 'Description':3, 'Duration':8.1, 'Source':'West', 'Destination':'San Bernardino', 'Picklist':3000, 'Postlist':40000.0},
       {'Circuit': '.net', 'Description':4, 'Duration':6.2, 'Source':'Queens', 'Destination':'San Bernardino', 'Picklist':5000, 'Postlist':6000.1}, 
       {'Circuit': '.net', 'Description':3, 'Duration':20.1, 'Source':'Queens', 'Destination':'Los Angeles', 'Picklist':5000, 'Postlist':4000.1},
       {'Circuit': '.net', 'Description':2, 'Duration':15.5, 'Source':'Brooklyn', 'Destination':'San Francisco', 'Picklist':5000, 'Postlist':9000.3},
       {'Circuit': '.net', 'Description':4, 'Duration':7.7, 'Source':'Brooklyn', 'Destination':'Davie', 'Picklist':6000, 'Postlist':10000},
       {'Circuit': '.net', 'Description':4, 'Duration':7.7, 'Source':'Los Angeles', 'Destination':'Westchester', 'Picklist':6000, 'Postlist':10000},
       {'Circuit': '.net', 'Description':4, 'Duration':7.7, 'Source':'San Berdarnino', 'Destination':'Westchester', 'Picklist':6000, 'Postlist':10000}]
df = pd.DataFrame(data)

G = nx.from_pandas_edgelist(df, source='Source', target='Destination', edge_attr='Picklist')

from pyvis.network import Network
g = Network(notebook=True, cdn_resources='remote')
g.from_nx(G)
display(HTML(g.generate_html()))

重新启动并运行代码几次后的结果:

**如果在30秒后没有显示图形,重新启动内核并再次运行单元格。**我第一次运行时,它重复了几次这个循环,然后它一致地显示了网络;然而,我是通过安装的jueyter终端,也许没有等待和重新启动正确。另外,请确保您的会话中一次只有一个单元格尝试显示pyvis图!(在尝试另一个之前清除任何一个输出。)您的里程可能会有所不同。如果它是专门为运行这个包而构建的,那么它可能会工作得更好,这样它就可以从一开始就正确地安装这个包。我认为在这里按下页面底部的“启动绑定器”徽章应该会给你给予这样一个会话,然而,开发人员出于某种莫名其妙的原因遗漏了matplotlib(当时我尝试在笔记本中运行%pip install matplotlib,在这样的启动会话中运行时遇到了版本问题),而且我不想在配置文件中为mybinder服务正确指定所有内容来制作一个特殊的repo。(如果它看起来挂起,你可以尝试here,类似于我对上面默认repo的指导。

但如果你真的只是想在本地浏览器中显示结果交互式图形而不运行xmlyter,该怎么办?

我上面所做的一部分是为了达到一个点,我有很好的pyvis-related代码,我可以用它来尝试,看看它生成的东西是否可以在以后交互式地显示图形,而不需要运行pyroyter。事实证明,它可以!
下面是如何将上面的示例在Webyter中运行,并将其作为一个独立的HTML文件直接在Web浏览器中运行。这可能更沿着你想要的路线;然而,我需要首先到达这一点,**希望通过描述使代码示例工作的完整途径并仅获得HTML,您将看到如何将其插入到您正在做的事情中以及您正在工作的地方。
如果你看上面的代码,你会看到它所做的一部分是生成HTML,并以HTML格式显示。您可以自己获取该HTML,然后将其粘贴到您喜欢的代码编辑器中,并使用.html扩展名将该文本文件保存在本地计算机上。然后,当您运行浏览器并将其指向.html文件时,它将显示交互式绘图!
在运行上面的代码后,如何一步一步地做到这一点:

  • 在图至少显示一次后创建一个新单元格。你可以从该单元格中清除输出,如果你喜欢或不喜欢,这应该没有关系。在新单元格中,添加以下代码:
c = g.generate_html()
print(c)
  • 该代码将打印您需要的HTML。您可以在运行中的xmlyter笔记本中选择该代码,并将其复制到剪贴板,然后将其粘贴到运行在您的机器上的最喜欢的代码文本编辑器中,并将其保存为本地机器上的my_html.html。或者,在新单元格中的这两行之后添加%store c >my_html.html行(或在上述两行之后的同一单元格中),然后运行该行(如果将其添加到这两行之下,则运行整个单元格)。它将保存.html文件到xmlyter会话中。如果您将其保存到会话中,则需要在左侧的文件导航器窗格中右键单击该文件,然后将其下载到计算机中。(或者,您也可以在不从会话下载HTML的情况下验证HTML是否正常工作,方法是双击X1 m7n1x文件(位于X1 m7n1x会话左侧的文件导航窗格中),然后在出现的X1 m7n1x窗口中按左上角的“Trust HTML”按钮。按下“Trust HTML”按钮后,HTML代码将由QueryterLab作为HTML运行,并显示图形。
  • my_html.html保存在本地计算机上后,您就可以使用本地浏览器打开它了。在我的Mac上,我右键单击保存的文件,选择“打开方式.”,然后选择Chrome。您的路径将因系统而异。**现在你已经有了由pyvis生成的HTML代码,它可以交互式地显示在你的浏览器中(它可以滚动和缩放),而不需要当前运行的Pyvis。

浏览器窗口中的结果(稍后添加到答案中,因此与上面的结果不完全匹配):

相关问题