js布局库

1、viz.js

The solution was that someone cross compiled Graphviz to Javascript using llvm + emscripten.

got some info from:

http://stackoverflow.com/questions/18952345/directed-acyclic-graph-using-d3-js-without-dot

http://stackoverflow.com/questions/6344318/pure-javascript-graphviz-equivalent/14866384#14866384

2、yfiles

yworks的一个强大产品，可以自动处理各种图布局，并且可以交互，有html版本，可惜不是开源的。这里有一些demo

3、dagre

一个图布局库，可以跟d3结合，算是一个可以考虑的开源方案，如果跟d3结合的复杂性，性能等问题需要考察

4、dagre-d3

dagre-d3 is a D3-based renderer for dagre.

5、JointJS

这个是基于上面的dagre布局引擎开发的，感觉很不错的东西。

JointJS is a renderer that provides facilities for editing a graph after it has been rendered

6、Dracula Graph Library

Dracula is a set of tools to display and layout interactive graphs, along with various related algorithms.

也不错，基于raphael

7、canviz

js版graphviz，不过才处于起步阶段

最后附一段从stackoverflow上找到的一段话：

Rendering directed acyclic graphs (and actually highlighting the directedness property) is a domain of the Sugiyama layout algorithms.

They basically assign layers (through a topological sorting) to the nodes and then calculate a sequencing for the nodes in the layers. Using a simple heuristic to reverse cycles first, this works well for cyclic graphs as well. Graphviz DOT has an implementation of this layout called dot, which is also the name of the file format it uses, so there sometimes is a bit confusion when DOT is mentioned.

Of course there are other implementations of the algorithm, even a cross-compiled Javascript version of dot is available. The probably most feature-complete solution available for Javascript is the commercial implementation of the algorithm in the yFiles library. So if this is in a commercial scenario, you might want to take a look at the corresponding live demo. Note that although yFiles comes with its own rendering and editor implementation, you could still plug the code into d3.js, since the layout algorithms can be used as standalone implementations to "just" calculate the coordinates of the nodes, the edge connection points, the bends, and the labels. This specific implementation supports a great number of additional constraints, like "Port Constraints" (to restrict the direction of the outgoing and incoming edges as well as their exact locations at the nodes), hierarchically grouped nodes (where each node can have a parent node and the parent node "contains" all of its child nodes), layer and sequence constraints, edge labeling constraints, different edge routing styles, bus-routing, and more.

一个相关的介绍网站 https://www.erp5.com/en/search_area/javascript-10.Flow.Chart