我正在创建一个Django应用程序,并希望拥有社交网络的可视化。我正在寻找一个可以绘制图形/网络数据结构的库,但也可以使它具有交互性。我希望能够点击一个节点,并在页面上的其他位置显示该节点的信息(名称,网络等)
到目前为止,我发现python-graph和graphviz是非常强大的可视化工具,但它们会创建静态图像,因此您无法单击它们。我也找到了这个帖子
Graph visualization library in JavaScript
有很多建议,但其中一些是图表中的图形,而不是社交网络图形中的图形。其中一些是非常老的,其中一些只是交互式的,因为节点可以被拖动并移动到画布上的其他位置。我不太关心用户能够更改图表,我只是想让节点对象携带可以在某处显示的数据。
有什么建议吗?
答案 0 :(得分:6)
我使用PyGraphviz做了类似的事情。您可以将图表另存为SVG并在您的网站中显示SVG。然后,您可以使用jQuery SVG之类的东西将处理程序附加到节点。
我实现了一个更灵活的解决方案,并将所有节点和边缘序列化为JSON格式并将其发送到网站。然后我使用Raphaël绘制图形。该解决方案具有跨浏览器兼容性且非常灵活。
答案 1 :(得分:1)
我喜欢d3。以下是force-directed graph(通常用于显示社交网络)的示例。
将你正在寻求的点击处理添加到d3力量示例中会相当容易。
答案 2 :(得分:1)
结账时也django-netjsongraph。
答案 3 :(得分:0)
库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