类图-最佳节点定位

时间：2019-02-19 14:17:26

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

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

此查看器最关键的部分是它应该能够最佳地定位节点，这样我们就不会出现链接交叉（只要有可能），并且还应该能够清楚地看到什么与什么连接了

我们知道：

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

我们想要：

  • 查看连接结束（可以通过手动移动节点来实现）。

  • 最小化链接交叉（如果可能）

我需要的是某种理论。

是否存在可以解决上述问题的已知算法（语言无关紧要，我只需要理论参考即可）

在下面放置示例

  • 目前情况如何
  • 我自己可以实现什么
  • 什么是完美的

示例1。

当前

enter image description here

可实现

enter image description here

完美

enter image description here

示例2。

当前

enter image description here

可实现

enter image description here

完美

enter image description here

示例3。

当前

enter image description here

可实现且完美

enter image description here

示例4。

当前

enter image description here

可实现

enter image description here

完美

enter image description here

示例5。

当前

enter image description here

可实现

enter image description here

完美

enter image description here

示例6。

当前

enter image description here

完美

enter image description here

更新

在这种情况下（由于d3-dag），传统（节点到节点链接）的交叉已被最小化。问题是我们没有唯一的节点到节点关系，我们也有节点行对行关系，在这种情况下，d3-dag失败

1 个答案:

答案 0 :(得分：0)

我使用了d3-dag to topologically sort nodes，然后将它们重新垂直放置，如果是奇数，则顶部放置，如果是偶数，则底部放置。

尽管这不是我要找的算法，但它极大地改善了组件的视觉外观，并使可读性更强

旧 enter image description here

新 enter image description here

旧 enter image description here 新 enter image description here

旧 enter image description here 新 enter image description here

相关问题
最新问题