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。

^{免责声明：我为创建库公司工作，但是，所以我并不代表我的雇主。}