首页 > 解决方案 > 类图——最优节点定位

问题描述

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

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

我们知道:

我们想要:

我需要的是理论上的。

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

下面举个例子

示例 1。

当前的

在此处输入图像描述

可实现的

在此处输入图像描述

完美的

在此处输入图像描述

示例 2。

当前的

在此处输入图像描述

可实现的

在此处输入图像描述

完美的

在此处输入图像描述

示例 3。

当前的

在此处输入图像描述

可实现且完美

在此处输入图像描述

例 4。

当前的

在此处输入图像描述

可实现的

在此处输入图像描述

完美的

在此处输入图像描述

例 5。

当前的

在此处输入图像描述

可实现的

在此处输入图像描述

完美的

在此处输入图像描述

例 6。

当前的

在此处输入图像描述

完美的

在此处输入图像描述

更新

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

标签: javascriptalgorithmd3.jsgraphclass-diagram

解决方案


我使用d3-dag 对节点进行拓扑排序,然后垂直重新定位它们,如果奇数则顶部,如果偶数则底部

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

老的 在此处输入图像描述

新的 在此处输入图像描述

在此处输入图像描述 在此处输入图像描述

在此处输入图像描述 在此处输入图像描述


推荐阅读