【问题标题】:Class diagram - optimal node positioning类图——最优节点定位
【发布时间】:2019-02-19 14:17:25
【问题描述】:

我正在尝试使用 d3.js 和 d3.dag 构建类图模型查看器

这个查看器最关键的部分是它应该能够优化定位节点,这样我们就不会发生链接交叉(尽可能),并且应该能够清楚地看到什么与什么相连

我们知道:

  • 每个节点的宽度
  • 每个节点的高度
  • 链接起始坐标
  • 链接结束坐标
  • 链接所有角坐标

我们想要:

  • 查看连接结束(可实现手动移动节点)

  • 尽量减少链接交叉(如果可能)

我需要的是理论上的。

有没有已知的算法可以解决上述问题(语言无所谓,我只需要理论参考)

下面举个例子

  • 目前情况如何
  • 我自己能做到什么
  • 什么才是完美的

示例 1.

当前

可实现

完美

示例 2。

当前

可实现

完美

示例 3。

当前

可实现且完美

示例 4.

当前

可实现

完美

示例 5。

当前

可实现

完美

示例 6。

当前

完美

更新

在这种情况下,传统(节点到节点链接)交叉已经最小化(感谢 d3-dag)。问题是我们没有唯一的节点到节点的关系,我们还有一个节点的行到行的关系,在这种情况下,d3-dag 失败

【问题讨论】:

标签: javascript algorithm d3.js graph class-diagram


【解决方案1】:

我使用d3-dag to topologically sort nodes,然后将它们垂直重新定位,如果奇数则顶部,如果偶数则底部

虽然它不是我一直在寻找的算法,但它显着改善了组件的视觉外观并提高了可读性

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-05-11
    • 2017-02-07
    • 2021-01-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-29
    • 2015-04-07
    相关资源
    最近更新 更多