Multigraphs with javascript

问题:

First of all look at this question.

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

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

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

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 !

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

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

Thanks in advance.

回答1:

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.

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

回答2:

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

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]}

回答3:

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

回答4:

Some of those graph visualization libraries (mentioned in this question) DO support Multigraphs and allow dragging/placement of nodes

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

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

but as far as your issue

4- Its really ugly!

These may not appeal to your aesthetic.

回答5:

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

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

回答6:

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.

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

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.

回答7:

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

回答8:

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

回答9:

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

It easily supports multi-graphs and 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.

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 performance with thousands of elements.

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.

回答10:

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

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