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:
I can't move nodes or add remove edges interactively.
Only 2000 API calls per month. Not enough.
I can't produce large or intermediate graphs.
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.
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.
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:
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
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.
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.
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.
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.
Best bet would be to render them on the server (or use it as an applet) with JGraphT.
I think paper.js (http://paperjs.org) will get you also pretty close.
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.
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.
Here is example implementation of your multigraph in vis.js (info: edges, nodes, physics)
var len = undefined;
var red = {color:'red'};
var black = {color:'black'};
var blue = {color:'blue'};
var gray = {background: '#c0c0c0', border: '#000',
highlight:{background:'red',border:'black', color:blue}};
var nodes = new vis.DataSet([
{id: 1, color:gray}, // you can add: label: "Hi"
{id: 2, color:gray},
{id: 3, color:gray},
{id: 4, color:gray},
{id: 5, color:gray},
{id: 6, color:gray},
]);
var edges = [
{from: 1, to: 5, color: red},
{from: 1, to: 6, color: red},
{from: 1, to: 6, color: red},
{from: 1, to: 6, color: red},
{from: 1, to: 2, color: black},
{from: 2, to: 6, color: black},
{from: 2, to: 2, color: blue},
{from: 2, to: 3, color: black},
{from: 3, to: 6, color: red},
{from: 3, to: 6, color: red},
{from: 3, to: 3, color: blue},
{from: 3, to: 4, color: black},
{from: 4, to: 4, color: blue},
{from: 4, to: 5, color: black},
{from: 4, to: 6, color: red},
{from: 4, to: 6, color: red},
{from: 5, to: 1, color: red},
{from: 5, to: 6, color: black},
]
// create a network
var container = mynetwork;
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'dot',
size: 12,
font: {
size: 22,
color: '#000000'
},
borderWidth: 1.5
},
edges: {
width: 3,
selfReferenceSize:40,
length:80,
color : {
highlight: "green"
}
}
};
network = new vis.Network(container, data, options);#mynetwork {
width: 100%;
height: 200px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<div id="mynetwork"></div>来源：https://stackoverflow.com/questions/8308516/multigraphs-with-javascript