问题标签 [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.

0 投票
0 回答
310 浏览

d3.js - 如何绘制一个固定轴的图形布局

我正在尝试绘制 y 轴坐标基于时间的图形布局 - 是否有任何已知的算法可以实现这一点?我研究了 dagre,但似乎排名系统完全基于网络中的边缘。

多个节点可能具有相同或相似的 Y 坐标,因此想法是水平间隔节点以避免节点重叠,同时保持平衡的布局。有点像附加的图像(未显示所有边缘)。根据 Reingold & Tilford 或 Sugiyama 算法,最好尽量减少重叠边缘。有任何想法吗?我已经尝试使用 D3 强制导向布局并固定 y 坐标,它确实有效(尽管有点跳跃),但这种方法的规模不会超过几百个节点。我需要处理最多 5000 个节点和 5000 个边,这意味着实际渲染很可能需要使用 html 画布而不是 svg。

更新:下面应该更好地了解我想要实现的目标(实际上需要一些边缘交叉,但这是一般的想法)。

在此处输入图像描述

以上可以从以下 JSON 生成:

0 投票
0 回答
192 浏览

graph - 使用 graphviz 创建谱系图布局

Graphviz有一些强大的图形布局算法。

但是它可以像下面描述的那样布置一棵二叉树吗?顶部节点位于页面中间,每个父节点都向一侧展开。

我可以使用哪个 graphviz 工具来重新创建此布局?

谱系图

0 投票
2 回答
1129 浏览

javascript - 如何制作没有节点边缘重叠的力导向布局

我正在尝试改进强制定向布局算法(对于有向图) 基本算法有效,即满足以下代码中的 isStable 条件并且算法结束,但边和节点可以重叠。所以我想在边缘的中间添加一些虚拟顶点(如下图所示)来解决这个问题,因为虚拟顶点会使边缘排斥其他边缘和节点。

在此处输入图像描述

我添加了 addDummies 方法,该方法为每个不是循环的边添加一个节点。我将添加的节点称为 midNodes。

然后在每次迭代(迭代方法)中,我将 midNodes 的位置设置为边缘的中间。剩下的就是老算法了。

我获得了一个更好的布局,没有边缘重叠,但从未满足结束条件,此外,绘图不是那么好,因为 midNodes 在中心节点周围形成了一种“甜甜圈”,如下图所示( midNodes 在红色圆圈内)

在此处输入图像描述

我正在寻找在边缘上使用虚拟节点的算法的详细描述,或者寻找使算法终止并获得更好图纸的任何建议(我希望 midNodes 不要将其他节点排斥在外部区域)

我还应该将来自 midNodes 的新边添加到旧节点吗?

一个解决方案可能是更改 isStable 条件,但该数字通常可以确保图表布局正确,所以我不想碰它。

编辑:我以这种方式使用以下代码

以下是当前代码的摘录

0 投票
1 回答
3042 浏览

python - 如何使用 Networkx 包显示具有更好分离度的网络?

我使用包创建了一个图形对象,pytextrank如下所示:

我可以使用这个networkx包来networkx绘制这样的图:

在此处输入图像描述

但正如你所看到的,这些词大多集中在中心周围。我希望看到词类之间有更高的分离度。我怎么做?

0 投票
1 回答
171 浏览

r - 如何控制网络布局算法的异常节点?

igraph使用带有 Fruchterman-Reingold 布局算法的包呈现大图(> 10000 个节点;> 10000 条边) 。一些异常节点会使可视化变得困难,99% 的节点挤在一起,而 1% 的异常节点位于很远的地方。例如,99.9% 的节点位于 0 到 10 之间,但 0.1%的节点位于 10000 之外。问题是如何控制这些异常节点以呈现所有节点。

这是一个示例,其中 0.2% 的异常值节点使完整呈现变得困难。

0 投票
1 回答
56 浏览

graphviz - Graphviz 在不同级别的节点之间强制排序

我有以下图表:

在此处输入图像描述

有没有办法强制/鼓励边缘f -> c在节点之间b通过g?我尝试了许多不同的策略,graphviz 拒绝这两种策略:

  • 保持在边界内,b并且g
  • 允许g出现在一边,不干扰图形的其余部分。

我们欢迎所有的建议!