从NetworkX生成Canvas输出

The advantage of using matplotlib with NetworkX is the ease with which one can produce PDF, PNG, and SVG outputs.

使用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")

How can this code be modified to produce HTML5/Javascript Canvas code? Concrete code, however trivial, is more helpful than rooting for a given library. Sigmajs seems promising, if not for the scanty documentation.

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

1 个解决方案

#1

The most straightforward way to achieve what you want is to simply export the graph as GEXF with Networkx using:

实现您想要的最直接的方法是使用以下方法将图形作为GEXF与Networkx一起导出:

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

Then in your HTML you can use the sigma.js GEXF parser like so:

然后在您的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>

If you want to look at a real live example, I suggest this blog post at the bottom.

如果你想看一个真实的实例,我建议在底部发布这篇博文。

DISCLAIMER: it's my blog ;)

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

#1