Django和交互式图形/网络可视化

Question

我正在创建一个Django应用程序，希望能够可视化社交网络。我正在寻找一个可以绘制图形/网络数据结构的库，同时还可以使其具有交互性。我希望能够单击节点并在页面其他位置显示该节点的信息（名称、网络等）。

到目前为止，我发现python-graph和graphviz是非常强大的可视化工具，但它们创建静态图像，因此无法单击它们。我还发现了这个主题 JavaScript中的图形可视化库 其中有很多建议，但其中一些是关于图表的，而不是社交网络图形。其中一些非常古老，一些仅在画布上拖动和移动节点时才具有交互性。我不太关心用户能否更改图形，我只想让节点对象携带数据，并在某处显示。

有什么建议吗？

- JCWong

---

嗨-我也在寻找同样的东西，我是Python的新手，想知道你能否分享你的项目..谢谢 - user2912312

Answer 1

我曾使用PyGraphviz做过类似的事情。你可以将图形保存为SVG格式并在网站上显示SVG。然后，你可以使用jQuery SVG之类的工具来附加节点处理程序。

我实现了一种更灵活的解决方案，将所有节点和边序列化为JSON格式并发送到网站。然后，我使用Raphaël绘制图形。这个解决方案跨浏览器兼容且非常灵活。

- Reto Aebersold

Answer 2

还可以查看django-netjsongraph。

- nemesisdesign

Answer 3

我喜欢 d3。这里有一个力导向图的例子（通常用于显示社交网络）。

将你所寻求的点击处理添加到d3力导向示例中将是相当容易的。

- Beau

---

链接无效。你有更新吗？ - Josir

@Josir刚刚更新了链接，感谢提醒。 - Beau

Answer 4

库d3graph将从Python中构建一个力导向的d3图形。您可以根据边缘权重“断开”网络，并悬停在节点上以获取更多信息。双击节点将聚焦于节点及其连接的边缘。

pip install d3graph

例子：

# Import library
from d3graph import d3graph, vec2adjmat

source = ['node A','node F','node B','node B','node B','node A','node C','node Z']
target = ['node F','node B','node J','node F','node F','node M','node M','node A']
weight = [5.56, 0.5, 0.64, 0.23, 0.9,3.28,0.5,0.45]

# Convert to adjacency matrix
adjmat = vec2adjmat(source, target, weight=weight)

print(adjmat)
# target  node A  node B  node F  node J  node M  node C  node Z
# source                                                        
# node A    0.00     0.0    5.56    0.00    3.28     0.0     0.0
# node B    0.00     0.0    1.13    0.64    0.00     0.0     0.0
# node F    0.00     0.5    0.00    0.00    0.00     0.0     0.0
# node J    0.00     0.0    0.00    0.00    0.00     0.0     0.0
# node M    0.00     0.0    0.00    0.00    0.00     0.0     0.0
# node C    0.00     0.0    0.00    0.00    0.50     0.0     0.0
# node Z    0.45     0.0    0.00    0.00    0.00     0.0     0.0

# Initialize
d3 = d3graph()

# Process adjacency matrix
d3.graph(adjmat)
d3.show()

# Example B: Color nodes
d3.set_node_properties(color=adjmat.columns.values, size=size)
d3.show()

# Example C: include node size
size = [10,20,10,10,15,10,5]
d3.set_node_properties(color=adjmat.columns.values, size=size)
d3.show()

# Example D: include node-edge-size
d3.set_node_properties(color=adjmat.columns.values, size=size, edge_size=size[::-1], cmap='Set2')
d3.show()

# Example E: include node-edge color
d3.set_node_properties(color=adjmat.columns.values, size=size, edge_size=size[::-1], edge_color='#000000')
d3.show()

# Example F: Change colormap
d3.set_node_properties(color=adjmat.columns.values, size=size, edge_size=size[::-1], edge_color='#00FFFF', cmap='Set2')
d3.show()

# Example G: Include directed links. Arrows are set from source -> target
d3.set_edge_properties(directed=True)
d3.set_node_properties(color=adjmat.columns.values, size=size, edge_size=size, edge_color='#000FFF', cmap='Set1')
d3.show()

• 更多示例和信息可以在GitHub文档页面中找到。
• 您可以在此处找到Titanic案例的交互式示例。
• 如果您需要了解d3graph是如何开发的，请阅读此处的博客。

- erdogant

---

这个回答并没有解释如何在创建后修改图的结构。如果可能的话，能否请您详细说明一下呢？ - mo FEAR

我更新了示例。使用d3.set_node_properties()可以更改属性。绘图可以使用d3.show()完成。 - erdogant

谢谢，我稍后会尝试一下。 - mo FEAR

示例仅演示更改权重。但它假定节点和边的存在保持不变。这不是我想要的。我正在寻找一种在需要时迭代地更改邻接矩阵本身的方法。这可能吗？ - mo FEAR

邻接矩阵在网络创建后无法更改。应该在此库之外完成，然后再次运行它。您可以提供目标路径以保持链接不变。 - erdogant