个人中心
gpt4 book ai didi

javascript - 类图——最优节点定位

转载 作者：塔克拉玛干 更新时间：2023-11-03 06:38:26 25 4
gpt4 key购买 nike

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

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

我们知道:

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

我们想要:

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

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

我需要的是理论上的。

有没有已知的算法可以解决上面的问题(语言无所谓，我只是理论引用)

下面是例子

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

示例 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 失败了

最佳答案

我用了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

关于javascript - 类图——最优节点定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54768354/

25 4 0
文章推荐： python - Patsy 版本和 Dummy 列表版本之间使用 Statsmodels 进行线性回归的差异
文章推荐： python - 算法反转次数 (Python)
文章推荐： arrays - 打印 True 或 False
文章推荐： algorithm - 是否存在一系列扩充路径使得不需要后向边缘？
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com