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

Question

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

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

Graph visualization library in JavaScript

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

有什么建议吗？

Answer 1

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

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

Answer 2

我喜欢d3。以下是force-directed graph（通常用于显示社交网络）的示例。

将你正在寻求的点击处理添加到d3力量示例中会相当容易。

Answer 3

结账时也django-netjsongraph。

Answer 4

库d3graph将在python内部构建一个力控d3图。您可以根据边缘权重“破坏”网络，并将鼠标悬停在节点上以获取更多信息。双击节点将聚焦于该节点及其连接的边缘。

pip install d3graph

示例：

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]

# Import library
from d3graph import d3graph, vec2adjmat

# 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

# Example A: simple interactive network
out = d3graph(adjmat)

# Example B: Color nodes
out = d3graph(adjmat, node_color=adjmat.columns.values)

# Example C: include node size
node_size = [10,20,10,10,15,10,5]
out = d3graph(adjmat, node_color=adjmat.columns.values, node_size=node_size)

# Example D: include node-edge-size
out = d3graph(adjmat, node_color=adjmat.columns.values, node_size=node_size, node_size_edge=node_size[::-1], cmap='Set2')

# Example E: include node-edge color
out = d3graph(adjmat, node_color=adjmat.columns.values, node_size=node_size, node_size_edge=node_size[::-1], node_color_edge='#00FFFF')

# Example F: Change colormap
out = d3graph(adjmat, node_color=adjmat.columns.values, node_size=node_size, node_size_edge=node_size[::-1], node_color_edge='#00FFFF', cmap='Set2')

# Example H: Include directed links. Arrows are set from source -> target
out = d3graph(adjmat, node_color=adjmat.columns.values, node_size=node_size, node_size_edge=node_size[::-1], node_color_edge='#00FFFF', cmap='Set2', directed=True)

泰坦尼克号案例的互动示例可以在这里找到： https://erdogant.github.io/docs/d3graph/titanic_example/index.html https://erdogant.github.io/hnet/pages/html/Use%20Cases.html