使用 javascript 的多重图

Multigraphs with javascript

提问by linker

First of all look at thisquestion.

首先看看这个问题。

None of those libraries support Multigraphs(or Pseudographs ). I mean I can't generate graphs like this:

这些库都不支持Multigraphs（或 Pseudographs ）。我的意思是我无法生成这样的图表：

Is there any jQuery plugin (or javascript library) out there for this purpose ?

是否有任何用于此目的的 jQuery 插件（或 javascript 库）？

I thought i can use WolframAlpha's APIand use its images, something like this:

我想我可以使用WolframAlpha 的 API并使用它的图像，如下所示：

but it have lots of problem:

但它有很多问题：

1. I can't move nodes or add remove edges interactively.

2. Only 2000 API calls per month. Not enough.

3. I can't produce large or intermediate graphs.

4. Its really ugly !

1. 我无法以交互方式移动节点或添加删除边。

2. 每月仅 2000 次 API 调用。不够。

3. 我无法生成大图或中间图。

4. 它真的很丑！

Please help me if you know some javascript library in order to draw Multigraphs, or anyway to produce such graphs ( something like Dracula Graph Librarybut with ability to draw Multigraphs ).

如果您知道一些 javascript 库以绘制多图，或者无论如何要生成这样的图形（类似于Dracula 图形库，但可以绘制多图），请帮助我。

BTW, I don't want to use Adobe Flash instead of javascript anymore.( any other solutions are acceptable for me )

顺便说一句，我不想​​再使用 Adob​​e Flash 而不是 javascript。（任何其他解决方案对我来说都是可以接受的）

Thanks in advance.

提前致谢。

采纳答案by Developer

Cytoscape.JS supports multigraphs, is pure Javascript, and uses the new HTML 5 Canvas for performance. Its design intent is general purpose graph visualization/manipulation.

Cytoscape.JS 支持多图，是纯 Javascript，并使用新的 HTML 5 Canvas 来提高性能。它的设计意图是通用图形可视化/操作。

http://cytoscape.github.com/cytoscape.js/

http://cytoscape.github.com/cytoscape.js/

回答by Prashant Bhate

If you are allowed to use Google Charts APIyou may refer to this

如果你被允许使用Google Charts API你可以参考这个

http://code.google.com/apis/chart/image/docs/gallery/graphviz.html

http://code.google.com/apis/chart/image/docs/gallery/graphviz.html

Example:

例子：

https://chart.googleapis.com/chart?cht=gv&chl=graph{C_0--H_0[type=s];C_0--H_1[type=s];C_0--H_2[type=s];C_0--C_1[type=s];C_1--H_3[type=s];C_1--H_4[type=s];C_1--H_5[type=s]}

https://chart.googleapis.com/chart?cht=gv&chl=graph{C_0--H_0[type=s];C_0--H_1[type=s];C_0--H_2[type=s];C_0- -C_1[type=s];C_1--H_3[type=s];C_1--H_4[type=s];C_1--H_5[type=s]}

回答by Nate-

Some of those graph visualization libraries (mentioned in thisquestion) DO support Multigraphsand allow dragging/placement of nodes

其中一些图形可视化文库（在提及的这个问题）DO支持多重图，并允许节点拖动/放置

jsplumb: http://jsplumb.org/jquery/stateMachineDemo.html

jsplumb：http://jsplumb.org/jquery/stateMachineDemo.html

possibly http://js-graph-it.sourceforge.net/maysupport multigraphs.

可能http://js-graph-it.sourceforge.net/可能支持多图。

but as far as your issue

但就你的问题而言

4- Its really ugly!

4-真的很丑！

These may not appeal to your aesthetic.

这些可能不符合您的审美。

回答by Konstantin Pribluda

I'm affraid you will have to do some development yourself. Raphael.js is pretty capable in creating and manipulating svg - would be good starting point

我恐怕你必须自己做一些开发。Raphael.js 在创建和操作 svg 方面非常有能力——这将是一个很好的起点

回答by cantdutchthis

You might want to check this one out: www.d3js.org

你可能想看看这个：www.d3js.org

You'd have to do a lot yourself (make your own SVG and such), but the library is very powerful.

您必须自己做很多事情（制作自己的 SVG 等），但该库非常强大。

回答by Sebastian

In a commercial scenario, take a look at yFiles for HTML:

在商业场景中，看看yFiles for HTML：

It easily supports multi-graphsand does not look too ugly, I believe:

它很容易支持多图并且看起来不会太难看，我相信：

^{(These graphs have been laid out automatically, manual placement is also possible.)}

^{（这些图形已自动布置，也可以手动布置。）}

Of course this is a matter of taste, so if you don't like the look, you can change any aspect of the visualization, like in the style tutorial.

当然，这是一个品味问题，因此如果您不喜欢外观，您可以更改可视化的任何方面，例如在样式教程中。

The API offers full interactive editing capabilities and being a pure client-side solution, of course there is no API call count limit.

API 提供完整的交互式编辑功能，是一个纯客户端解决方案，当然没有 API 调用次数限制。

Large graphs are still a problem with todays' Javascript engines, but only if "large" means more than thousands of elements. With virtualization (considering only what is currently visible in the viewport during rendering), you can get good performancewith thousands of elements.

大图仍然是当今 Javascript 引擎的一个问题，但前提是“大”意味着超过数千个元素。使用虚拟化（仅考虑渲染期间视口中当前可见的内容），您可以获得数千个元素的良好性能。

Disclaimer: I work for the company that creates the library, on SO/SE, however I do not represent my employer. My posts and comments are my own.

免责声明：我在 SO/SE 上为创建图书馆的公司工作，但我不代表我的雇主。我的帖子和评论是我自己的。

回答by Zhongjun 'Mark' Jin

You can check jsnetworkx (http://jsnetworkx.org/)

您可以检查 jsnetworkx ( http://jsnetworkx.org/)

It is a js version of python graph library which supports multi-graph. It has a drawfunction which visualizes the graph using D3.js. It is available for both browser and node.js.

它是python图形库的js版本，支持多图。它有一个draw使用 D3.js 可视化图表的功能。它可用于浏览器和 node.js。

回答by tmaximini

I think paper.js (http://paperjs.org) will get you also pretty close.

我认为 paper.js ( http://paperjs.org) 也会让你非常接近。

回答by andreapavan

I recently used Graphviz to draw the connections between some authors pubblications. Graphviz is open source graph visualization software. The Graphviz layout programs take descriptions of graphs in a simple text language, and make diagrams in useful formats, such as images and SVG for web pages, PDF or Postscript for inclusion in other documents; or display in an interactive graph browser.

我最近使用 Graphviz 绘制了一些作者出版物之间的联系。Graphviz 是开源图形可视化软件。Graphviz 布局程序以简单的文本语言对图形进行描述，并以有用的格式制作图表，例如用于网页的图像和 SVG，用于包含在其他文档中的 PDF 或 Postscript；或显示在交互式图形浏览器中。

For example i used a simple DOT file to write all the connection between the authors and I produced a PNG file.

例如，我使用一个简单的 DOT 文件来编写作者之间的所有连接，然后我生成了一个 PNG 文件。

http://www.graphviz.org/

http://www.graphviz.org/

Here there is all the documentation that you need and in the gallery section you can see a lot of output example.

这里有你需要的所有文档，在画廊部分你可以看到很多输出示例。

Hoping it could be helpful.

希望它会有所帮助。

回答by Jan Jongboom

Best bet would be to render them on the server (or use it as an applet) with JGraphT.

最好的办法是使用JGraphT在服务器上呈现它们（或将其用作小程序）。