Pure JavaScript Graphviz等效

126

是否有人知道GraphViz能夠生成的定向流程圖的基於Javascript的純粹實現？我對漂亮的視覺效果輸出不感興趣，但是計算出每個節點的最大深度，以及貝塞爾曲線的佈局，這些貝塞爾曲線經過優化，可以在處理圖形而不是樹時處理相交邊緣的數量。的信息。我想在瀏覽器中運行這些代碼;我知道我可以很容易地將Graphviz作爲擴展插入到我的節點服務器中，甚至可以將其嵌入到.dot格式的圖形信息中。Pure JavaScript Graphviz等效

作爲參考，這裏是一個典型的GraphViz輸出。注意元素是如何疊加和分開的，以允許連接線在節點之間傳播，而不會相交（經常）或通過節點。

enter image description here

來源

2011-06-14 Armentage

你有這樣的一個例子圖表，對於我們這些不熟悉GraphViz的人來說？ – 2011-06-14 13:44:50

這似乎是一個重複的[圖形可視化代碼在JavaScript？]（http://stackoverflow.com/questions/7034/graph-visualization-code-in-javascript） – 2011-06-15 16:58:30

也許 - 檢查出來。許多評論和迴應都指向圖表工具，它們完全不像GraphViz，或者只能繪製* GraphViz輸出，但不能自己完成佈局。 – Armentage 2011-06-16 13:11:27

看看這個純JavaScript實現一個.DOT畫布渲染：

http://ushiroad.com/jsviz/

庫未記錄 - 筆者絕對應該宣傳和記錄它更（我會聯繫他建議他至少把它放在github上）。

更新：代碼一直推到github上： https://github.com/gyuque/livizjs

更新（14/2/2013）：另一個競爭者已經出現！任何對這個主題感興趣的人都應該看看Viz.js的example page和github repo。

來源

2012-07-04 20:33:13

這個項目看起來很神奇，可能是我見過的所有最好的解決方案，但是它肯定會在源代碼中挖掘一些方法來弄清楚如何使用它。代碼看起來很合理，但它可能並不那麼糟糕。 – captncraig 2012-07-05 15:14:58

到目前爲止，這與我在原始問題中尋找的最接近。它不僅僅是一個RENDERER，它也知道如何計算有向圖。是在某個地方的後端運行DOT，還是整個圖形生成算法在我的瀏覽器上運行？ – Armentage 2012-07-16 15:52:05

@Armentage，它完全在你的瀏覽器中運行。 Graphviz已被編譯爲JavaScript，這要歸功於[emscripten]（https://github.com/kripken/emscripten/）。源代碼雖然沒有被記錄下來，但現在幸運的是（在通過Twitter和電子郵件嘮叨作者之後）;-)可用的[here]（https://github.com/gyuque/livizjs）。分叉項目併爲其製作易於使用的API將是邁出的第一步！ – 2012-07-17 15:05:51

一個可以嘗試轉換的graphviz的JavaScript，就像它做了 'PDF閱讀器' 例如： https://github.com/kripken/emscripten

來源

2011-06-16 19:07:26 pedroteixeira

這是一個非常棒的建議。我正在考慮將代碼翻譯成JS本身......但這個llvm技巧是美麗的瘋狂！ – Armentage 2011-06-17 04:34:53

到目前爲止，我實際上已經給出了這樣一個嘗試.. emscripten仍然很年輕，文檔簡介。這絕對是一個值得關注的偉大項目，我可以看到它如何提供很大的力量。但是現在如果你不是那個寫它的人，那有點笨拙。 – synthesizerpatel 2011-12-29 06:44:05

這裏的Graphviz的爲Javascript使用Emscripten

一個交叉編譯完成

https://github.com/bpartridge/graphviz.js

來源

2012-04-28 04:24:03

這不是一個現成的graphviz替換，但d3.js是一個庫，可以做各種layou從給定的數據，並將是一個很好的平臺來實現graphviz。

這是an example of force-directed layouts這是graphviz所做的一種形式。

這裏的a speech about layouts與瘋狂真棒interactive slides。

要了解該項目，tutorials是非常好的。

來源

2012-06-19 14:54:52 w00t

https://github.com/cpettitt/dagre-d3在JavaScript中實現DOT圖。你可以在http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html上玩演示。 – Arthur2e5 2017-01-06 03:11:01

查看完所有選項後，我發現基於jsviz和graphviz.js的viz.js（https://github.com/mdaines/viz.js/）實際上具有可用於網頁的API，並且有足夠的示例可供您理解。

來源

2013-02-04 01:00:42

viz.js是偉大的，很容易，而不是它目前不支持HTML樣標籤： http：// www。 graphviz.org/doc/info/shapes.html#html – SirLenz0rlot 2013-02-08 10:15:54

經過搜索，我終於找到答案。

解決方案是有人用llvm + emscripten將Graphviz編譯爲Javascript。這裏是鏈接：

http://viz-js.com/

源，可以發現： https://github.com/mdaines/viz.js

而簡單地得到一個網頁起來使用：

var graphviz_text = ...; 
document.body.innerHTML += Viz(graphviz_text, "svg");

來源

2013-02-14 01:30:02

這正是我所期待的 – RobAu 2013-04-09 20:30:05

更新：我做了一個演示站點，展示了viz.js中的鉤子是如何有趣和輕鬆！查看www.webgraphviz.com – 2013-07-23 01:57:27

提供的github鏈接已被破壞 – Jaime 2016-07-14 11:42:08

Pure JavaScript Graphviz等效

回答

相關問題