14

我正在尝试制作一个基于浏览器的工具,让您可以检查出现在编程语言和 Makefile 的模块系统中的依赖关系图。

我正在寻找一个为我绘图的可视化框架。

要求是工具包可以

  • 标签节点(希望是边缘)
  • 考虑到我有无限空间(滚动条很好),自动将图形隔开到正确的大小(我不必猜测好的尺寸)
  • 很好地布局图形,使其看起来不那么凌乱
  • <= 5000 个节点没问题
  • 仅使用 JS 运行(无 Flash 或桌面应用程序)

或者,如果它可以轻松地移动节点并突出或隐藏图形的某些部分以获得更好的概览,那就太好了。

使用什么支持并不重要(SVG,画布,都很好)。

到目前为止,我已经查看了很多库(尤其是来自JavaScript 中的图形可视化库),但还没有找到合适的库:

  • d3很好,但它提供的唯一节点图是力图,它专注于实时物理。加载后,您必须等待物理引擎稳定下来。我不需要动画也不需要原力,我想立即显示图表。
  • GraphDracula示例几乎是我正在寻找的,但是已经有了 70 个节点和 400 个边,绘图性能变得非常糟糕。它的文档也很少(作为 35 行代码示例)。

你知道符合我要求的东西吗?谢谢!

4

2 回答 2

2

在商业场景中,您可能需要考虑yFiles for HTML

关于您的要求,它可以:

  • 向节点和边添加任意数量的标签
  • 提供几乎无限的滚动/平移/缩放区域
  • 使用多种自动布局算法自动布局图形。对于依赖图,分层布局器非常适合
  • 在具有大量节点的桌面浏览器上运行良好。但是,根据视觉复杂性和图形结构,5000 个元素可能会在今天的浏览器实现中变得困难。
  • 它是一个纯 Javascript 库,没有任何依赖关系
  • 使用 SVG 作为主要后端,但也可以利用 Canvas
  • 该库有据可查,鉴于其复杂性,这是必要的

这是显示上述一些功能的屏幕截图 - 布局是自动计算的:

在此处输入图像描述

免责声明:我为创建图书馆的公司工作。在 SO/SE 上,我不代表我的雇主。这是我自己的帖子。

于 2014-01-24T15:31:30.680 回答
1

Dagre 非常适合图形布局(水平/垂直对齐、标签等),并且具有 D3 渲染器。

https://github.com/cpettitt/dagre-d3(最后查看图片)

https://github.com/cpettitt/dagre

于 2013-11-03T02:09:13.863 回答