使用沒有DOT的d3.js的有向無環圖

我正在嘗試使用d3.js繪製有向無環圖。在搜索佈局時，我遇到了Dagre，但它似乎沒什麼用處，因爲我不想在任何地方使用基於DOT的代碼。如果有人知道這個純JavaScript解決方案或DAG的插件/自定義佈局，請告訴我。提前致謝。使用沒有DOT的d3.js的有向無環圖

來源

2013-09-23 A.G.

Dagre作者在這裏。 Dagre不包含任何graphviz代碼 - 它是純粹的JavaScript。它基於類似的佈局技術;兩者都基於杉山紙的技術。

你可以在這裏找到dagre的一些例子：

http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html http://cpettitt.github.io/project/dagre-d3/latest/demo/sentence-tokenization.html http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html

縮小的源可以在這裏找到：http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.min.js。它的時鐘大約在44K。

來源

2013-12-03 03:08:12

謝謝克里斯。我現在對dagre進行了詳細的研究，但對於幾個方面還是不太清楚： 1.它能處理圖中的循環，但不是一個很大的限制嗎？ 2.我可以在圖形佈局中使用圖標而不是基本形狀嗎？ –

1）它可以處理循環圖。 2）對矩形以外的形狀沒有特別的處理。但是，您可以覆蓋繪製節點形狀的函數（renderer.drawNode（yourDrawNode））。你可以在這裏看到一個如何運行的例子：http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html。或者，您可以使用HTML，通過使用HTML元素啓動標籤。請參閱本例中節點A的標籤： http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html。 –

謝謝克里斯。這真的很有幫助。 –

渲染有向無環圖（實際上突出顯示定向屬性）是Sugiyama佈局算法的一個域。

他們基本上分配層（通過拓撲排序）到節點，然後計算層中節點的排序。首先使用簡單的啓發式逆循環，對於循環圖也是如此。 Graphviz DOT有一個名爲dot的佈局實現，它也是它使用的文件格式的名稱，所以在提到DOT時有時會有點混亂。

當然還有其他算法的實現，即使交叉編譯的Javascript版本的點是available。可用於Javascript的大多數功能完整的解決方案是yFiles庫中算法的商業實現。因此，如果這是商業場景，您可能需要查看相應的live demo。請注意，儘管yFiles帶有自己的渲染和編輯器實現，但仍然可以將代碼插入到d3.js中，因爲佈局算法可以用作獨立實現來「計算」節點的座標，邊連接點，彎曲和標籤。這個特定的實現支持大量的附加約束，如「端口約束」（限制傳出和傳入邊的方向以及它們在節點處的確切位置），分層分組節點（其中每個節點可以有一個父節點並且父節點「包含」其所有子節點），層和序列約束，邊緣標記約束，不同邊緣路由樣式，總線路由等。

披露：我爲創建該圖書館的公司工作，但是因此我不代表我的僱主。

來源

2013-09-23 06:49:09 Sebastian

謝謝。基本上，我回避使用graphViz，因爲它需要編譯每個操作系統，但我會看看yFiles。 –

@AmitGupta：GraphViz的JavaScript交叉編譯版本當然不需要「重新編譯」。然而它仍然像瀏覽器中的一個巨大的二進制blob - 它沒有一個真正的API，但它更像是一個控制檯應用程序，即使在瀏覽器中。 – Sebastian

是的。我同意。似乎有需要自定義佈局。 –

使用沒有DOT的d3.js的有向無環圖

回答

相關問題