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

Question

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

到目前为止，我发现 python-graph 和 graphviz 是非常强大的可视化工具，但它们会创建静态图像，因此您无法单击它们。我还发现了这个线程

Graph Visualization Library in JavaScript

其中有很多建议，但其中一些适用于图表中的图表，而不是社交网络图表中的图表。其中一些非常古老，而另一些则是交互式的，因为节点可以在画布上拖动并移动到其他位置。我不太关心用户是否能够更改图表，我只想让节点对象携带可以在某处显示的数据。

有什么建议吗？

Answer 1

我使用 PyGraphviz 做了类似的事情。您可以将图形另存为 SVG 并在您的网站中显示该 SVG。然后，您可以使用 jQuery SVG 之类的内容将处理程序附加到节点。

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

Answer 2

还可以查看 django-netjsongraph。

Answer 3

我喜欢 d3。下面是一个强制导向图的示例（通常用于显示社交网络） 。

将您正在寻求的点击处理类型添加到 d3 Force 示例中将相当容易。

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 文档页面。
• 泰坦尼克号案例中的交互式示例可以在此处找到。
• 如果您需要更多有关 d3graph 开发方式的背景信息，请阅读