d3/cola:类 UML 图表的布局配置

Roh*_*oti 1 uml d3.js graphql webcola

我正在尝试使用 viz.js 以外的其他东西构建 graphql 模式可视化工具(该库太大,并且向捆绑包添加了 1MB)。有人向我推荐了 webcola,它似乎是一个非常强大的库。

我已经达到了正确渲染和链接必要元素的程度。我的下一步是调整布局。我想做一些类似于graphql-voyager(使用 viz.js)的事情。

这是我迄今为止所拥有的代码和框:

graphql 图

编辑:我的问题是,我如何布置与 graphql-voyager 类似的内容?我希望帮助设置正确的约束并应用必要的算法来定位节点并相应地路由边缘。

Iva*_*rov 6

GraphQL Voyager 作者在这里:)

在切换之前,viz.js我们用了近一个月的时间尝试了许多其他可能的解决方案。这是关于我们的旅程的文章:https://medium.freecodecamp.org/how-we-got-1-500-github-stars-by-mixing-time-tested-technology-with-a-fresh-ui- b310551cba22

TL;博士; 绘图是火箭科学

此外,自从 Voyager 发布(2 年前)以来,我们评估了更多的库,结果完全相同。

作为一个业余项目,我们正在致力于大幅缩小 Graphviz 分叉以满足 Voyager 的要求。我们的最终目标是用纯 JS 重写所需的部分并将其直接嵌入到 Voyager 中。ATM 处于早期 PoC 阶段,我们还没有准备好发布它。

  • @Jeremy 我们完成了代码提取,但由于我们删除了对 Dot 的支持,我们需要设计一种新的输入格式并为 WASM 模块编写 JS 包装器。无法给出确切的预计到达时间,但我们可能会在 2020 年上半年发布一些内容。 (2认同)