问题标签 [graph-layout]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
d3.js - 如何绘制一个固定轴的图形布局
我正在尝试绘制 y 轴坐标基于时间的图形布局 - 是否有任何已知的算法可以实现这一点?我研究了 dagre,但似乎排名系统完全基于网络中的边缘。
多个节点可能具有相同或相似的 Y 坐标,因此想法是水平间隔节点以避免节点重叠,同时保持平衡的布局。有点像附加的图像(未显示所有边缘)。根据 Reingold & Tilford 或 Sugiyama 算法,最好尽量减少重叠边缘。有任何想法吗?我已经尝试使用 D3 强制导向布局并固定 y 坐标,它确实有效(尽管有点跳跃),但这种方法的规模不会超过几百个节点。我需要处理最多 5000 个节点和 5000 个边,这意味着实际渲染很可能需要使用 html 画布而不是 svg。
更新:下面应该更好地了解我想要实现的目标(实际上需要一些边缘交叉,但这是一般的想法)。
以上可以从以下 JSON 生成:
javascript - 如何制作没有节点边缘重叠的力导向布局
我正在尝试改进强制定向布局算法(对于有向图) 基本算法有效,即满足以下代码中的 isStable 条件并且算法结束,但边和节点可以重叠。所以我想在边缘的中间添加一些虚拟顶点(如下图所示)来解决这个问题,因为虚拟顶点会使边缘排斥其他边缘和节点。
我添加了 addDummies 方法,该方法为每个不是循环的边添加一个节点。我将添加的节点称为 midNodes。
然后在每次迭代(迭代方法)中,我将 midNodes 的位置设置为边缘的中间。剩下的就是老算法了。
我获得了一个更好的布局,没有边缘重叠,但从未满足结束条件,此外,绘图不是那么好,因为 midNodes 在中心节点周围形成了一种“甜甜圈”,如下图所示( midNodes 在红色圆圈内)
我正在寻找在边缘上使用虚拟节点的算法的详细描述,或者寻找使算法终止并获得更好图纸的任何建议(我希望 midNodes 不要将其他节点排斥在外部区域)
我还应该将来自 midNodes 的新边添加到旧节点吗?
一个解决方案可能是更改 isStable 条件,但该数字通常可以确保图表布局正确,所以我不想碰它。
编辑:我以这种方式使用以下代码
以下是当前代码的摘录
r - 如何控制网络布局算法的异常节点?
igraph
使用带有 Fruchterman-Reingold 布局算法的包呈现大图(> 10000 个节点;> 10000 条边) 。一些异常节点会使可视化变得困难,99% 的节点挤在一起,而 1% 的异常节点位于很远的地方。例如,99.9% 的节点位于 0 到 10 之间,但 0.1%的节点位于 10000 之外。问题是如何控制这些异常节点以呈现所有节点。
这是一个示例,其中 0.2% 的异常值节点使完整呈现变得困难。