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

【问题标题】：Django and interactive graph/network visualizationDjango 和交互式图形/网络可视化
【发布时间】：2012-02-09 01:08:28
【问题描述】：

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

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

Graph visualization library in JavaScript

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

有什么建议吗？

【问题讨论】：

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

标签： django graph visualization social-networking

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

也结帐django-netjsongraph。

【讨论】：

【解决方案4】：

库d3graph 将从python 中构建一个力导向的d3-graph。您可以根据边缘权重“破坏”网络，并将鼠标悬停在节点上以获取更多信息。双击一个节点将关注该节点及其连接的边缘。

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

【讨论】：