JavaScript庫來繪製依賴關係圖

Question

我想能夠生成一個依賴關係圖，顯示哪個軟件組件依賴於哪些使用Javascript庫。

要求：

• 從頂部自動佈局，向下
• 箭頭節點之間的箭頭
• 標籤
• 節點可以是節點下的自定義圖像（矢量或光柵）
• 標籤，其可以具有混合格式

尼斯到有：

• 提示以獲取有關節點的更多信息
• 盒中盒圖的節點（這是由其他節點的節點）
• 產生相當快

我一直在尋找到幾種可能：

• dagrejs似乎缺乏自定義圖像節點的可能性。 編輯：在節點中使用html自定義圖像工作正常。
• jsplumbtoolkit似乎缺少了自動佈局可能性
• graphdracula似乎缺乏自上而下的依賴佈局的可能性，也許還自定義圖像
• vizjs具有非常稀疏文件

Answer 1

我想用d3.js東西是你最好的選擇。這有點嚇人（因爲它非常靈活，它給了你幾種方法來完成相同的任務，而且很難提前知道一些缺點）。

tree layout可能是一個非常接近開始（一個演示如何使用它是here）。

Answer 2

檢出webcola。它是d3.js強制佈局的直接替代品，並支持佈局約束，因此您可以根據您的要求要求所有edges to point downwards。

Answer 3

在商業環境中，你可能要考慮yFiles for HTML：

似乎所有的要求都滿足：

• 從上自動佈局，下：的等級性的實現（杉山風格）在圖書館佈局算法是完美的元素之間的可視化的依賴關係：

• 節點之間的箭頭（此圖是利用this online demo庫自動創建的）：被一個通用的圖形編輯庫箭頭當然邊緣的，被支持。
• 箭頭上的標籤：您可以爲邊（箭頭）和節點添加任意數量的標籤。
• 節點可以是自定義圖像（矢量或柵格）：yFiles使用SVG的核心，並提供默認樣式實現了可視化，以及可以很容易地添加自己的自定義可視化下的節點
• 標籤，這可能有一個混合的格式：標籤也可以是SVG支持的一切（這是很多），所以複雜的文本渲染以及矢量圖形和位圖也可以包含在標籤中。
• 工具提示可獲取節點上的更多信息：該工具支持開箱即用，工具提示可以是任何HTML + CSS和SVG/Canvas內容。
• 節點盒子框圖（對於由其他節點組成的節點）：此功能在庫中稱爲「節點分組」，在編輯過程中以及在自動佈局算法中均受支持，所以您可以將您的依賴關係分組到「第三方組件」，「OSS組件」等組中。您還可以將組嵌入到多個級別。
• 生成速度相當快：當然，根據複雜性，「相當快」對用戶來說仍然很長，但佈局算法應該能夠在幾秒鐘內生成佈局，即使有幾十個和幾十個元素。

有a lot of documentation available online。

^{免責聲明：我爲創建庫公司工作，但是，所以我並不代表我的僱主。}