从NetworkX产生Canvas输出 [英] Producing a Canvas output from NetworkX

问题描述

与NetworkX一起使用matplotlib的优点是可以轻松生成PDF，PNG和SVG输出.

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

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 似乎很有希望，即使不是针对稀缺的文档.

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.

推荐答案

最简单的方法是将图形导出为

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

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

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

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

<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 ;)

这篇关于从NetworkX产生Canvas输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！