从 NetworkX 生成 Canvas 输出

Question

将 matplotlib 与 NetworkX 结合使用的优势在于可以轻松生成 PDF、PNG 和 SVG 输出。

import networkx as nx
import matplotlib.pyplot as plt

G1 = nx.Graph()
G.add_nodes_from(["a", "b"])
G.add_edge("a", "b")
nx.draw_networkx(G)
plt.savefig("graph.pdf")
plt.savefig("graph.png")
plt.savefig("graph.svg")

如何修改此代码以生成 HTML5/Javascript Canvas 代码？具体的代码，无论多么微不足道，都比为给定的库扎根更有帮助。 Sigmajs 似乎很有希望，如果不是因为文档不足。

Answer 1

实现您想要的效果的最直接方法是使用 Networkx 将图形导出为 GEXF，使用：

G = nx.path_graph(4)
nx.write_gexf(G, "test.gexf")

然后在您的 HTML 中，您可以像这样使用 sigma.js GEXF 解析器：

<div id="container">
  <style>
    #graph-container {
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
    }
  </style>
  <div id="graph-container"></div>
</div>
<script>
/**
 * The plugin sigma.parsers.gexf can load and parse the GEXF graph file,
 * and instantiate sigma when the graph is received.
 *
 * The object given as the second parameter is the base of the instance
 * configuration object. The plugin will just add the "graph" key to it
 * before the instanciation.
 */
sigma.parsers.gexf('data/arctic.gexf', { // path to graph here
  container: 'graph-container'
});
</script>

如果你想看一个真实的例子，我建议this blog post at the bottom。

免责声明：这是我的博客 ;)

从 NetworkX 生成 Canvas 输出

Producing a Canvas output from NetworkX

javascript

python

matplotlib

networkx

sigma.js