问题标签 [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 投票
1 回答
1141 浏览

javascript - 带有固定节点的 Javascript cytoscape.js 自动布局

我正在用 cytoscape.js 制作图形布局。我希望一些节点有固定的位置。因此,在我当前的解决方案中,我使用 cytoscape 的 cos 布局并为这些节点设置位置。它可以工作,但我的布局中有一些节点重叠。我认为无论固定节点如何,cos布局都会定位节点。有谁知道我该如何解决这个问题?谢谢

0 投票
1 回答
1917 浏览

graph - MSAGL:更新可见图(添加边)

我正在构建一个简单的示例应用程序来测试 MSAGL,但是如果我在显示图表后添加一条边,则会收到 KeyNotFoundException。

我想这与我需要以某种方式刷新一些数据有关 - 或者可能使用另一种方法,但不知道如何。

样本:

异常详情:

0 投票
1 回答
396 浏览

c++ - boost Kamada-Kawai 弹簧布局顶点碰撞

我正在尝试使用 boost Kamada-Kawai-spring-layout 算法来布局图形。问题是顶点在某些图形中相互碰撞。我添加了权重为 1.0 的所有边

然后我像这样布置图表:

一些图表工作正常,而其他产生这样的输出 在此处输入图像描述

我认为布局很好,但边缘的长度需要增加,但我不知道如何

0 投票
4 回答
10899 浏览

graphviz - 如何在graphviz的点中控制级别节点顺序?

我有一个以树为骨干的图。例如,我有一个节点 A,其子节点 B、C 和 D。假设图形是自上而下绘制的,A 将在一个级别上,然后是 B、C 和 D。我想强制 graphviz在他们的等级内按 B、C、D 的顺序排列它们。这可能吗?如果是这样,怎么做?

如果只有 A、B、C 和 D,我只需将 B、C 和 D 按顺序放入输入点文件中即可获得此效果。但是,如果在 B、C 和/或 D 之外还有其他边,则有时订单会被打乱。这就是我想避免的。

在此处输入图像描述

0 投票
1 回答
726 浏览

javascript - 力导向图布局的性能和复杂性?

我有数千个节点和边的图表,我注意到 Cytoscape.js 的性能缺乏强制导向的 JavaScript 布局算法(cose 和 cola)。

我想知道我是否应该花时间寻找其他库或算法,或者这些算法的复杂性是否太高。在一个简单的算法中,我想每个节点都必须与其他节点进行比较,所以应该有一个二次复杂度,但是通过对连接性低的数据进行巧妙过滤,我可以想象出很好的近似值(我不需要数学上完美的结果,对用户来说只是直观的东西)。

我的目标是在典型的用户机器上在 10 秒内布局图表。

我发现的出版物(谷歌学术“力导向的复杂性”):

0 投票
1 回答
1909 浏览

cytoscape.js - cytoscape.js 布局,允许在复合内定位子级(例如点的等级)

我正在尝试使用 cytoscape 来替换我的dot输出并使其具有交互性(移动节点和化合物、展开/折叠化合物等)。当第一次加载图表时,应该向用户呈现默认布局。但是,我正在努力寻找支持dot调用的布局/配置rank

在我的图中,我有代表组件的复合节点。组件包含其他组件和/或状态、转换、变量。每个组件都可以指定inputsoutputs。在点中,我尝试通过将左侧 ( ) 和右侧 ( )rankdir=LR;定位来在系统 ( )中添加某种形式的流。其他元素没有,因此可以自由定位。然后我指定了包含所有递归组件的子图。inputsrank=source;outputsrank=sink;rankcluster

现在,这就是我在点中所拥有的。我希望它能解释我最终想要的结果。 显示结果的点示例

首先,我已经看到了这个问题,但据我了解,它是用于手动定位,而不是布局。

我还没有找到完全支持在复合内定位节点的布局。我研究了使用具有以下选项的 cytoscape.js-cola 布局:

我最终得到了这个 这就是我走了多远 如您所见,有一些流程,但不如dot.

我尝试为alignment参数添加一些函数,但据我了解,我只能指定绝对坐标(例如return {'x': 0};)。这基本上允许我对齐所有输入,而不是复合的所有输入。

这是我的示例的 CodePen:https ://codepen.io/anon/pen/GEaOQQ 在 Javascript 中,您可以看到以下注释

0 投票
4 回答
1126 浏览

python - Getting layout coordinates of graph vertices using python, networkx, pygraphviz

I want to create a graph using NetworkX, layout the graph using Graphviz(via pygraphviz). I have successfully ran all the examples in the NetworkX pygraphviz examples documentation

The question I have is - how do I get the coordinates (x, y) and dimensions (width, height) of the vertices back into the NetworkX graph. That is the goal. I want only Graphviz' layout capabilities, not drawing capabilities. Is that possible using this stack (NetworkX, pygraphviz, graphviz)? Any other way?

The background motivation is this. Graphviz outputs png, or ps, or svg and many other formats. But I don't want to be constrained by the formats Graphviz handles. And I want to be able to post-process the layout results, even if I end up outputting the popular formats like Graphviz does support.

Update: I have rewritten the question for clarity. The advice on Graphviz output formats miss the point. It is the layout data that I need

Update2: One suggestion was to make Graphviz ouptput in some format that I can then parse the layout data back from. The suggestion was for SVG. I had had considered that possibility. Graphviz outputs json (according to Graphviz output formats documentation page). I failed to make it work on my windows installation - for some reason not all the output formats were present). However it is the approach that makes me uneasy. Parsing formatted output for data that was used to create that output seems backwards. The data itself should have been made available, I think.

Update 3 - There is a similar question - How to get the coordinates from layout from graphviz?. One of the answers suggests using NetworkX. However the answer uses layout made by NetworkX and not Graphviz. The author of the answer did not know how to get the Graphviz layout data. So my question remains relevant, and yet to be answered

Update 4 - it is 07-2019 and I still did not find a way to solve this. I marked one answer as accepted - but with a caveat - I still am in the dark despite the good advice found in that answer

0 投票
1 回答
226 浏览

graphviz - 图形渲染软件,尊重节点和边的相对顺序

我正在为给定的一组节点和边生成一个(GraphViz)“点”文件。节点在 y 维度上排序,rank=same,在等级内的 x 维度上。边缘按照它们应该被绘制的顺序排序。不幸的是,“点”不尊重 x 维度的顺序。如果可以,我将实现平面有向图的无交叉布局。不管它们是循环的还是非循环的。

我的问题:

  1. 如何告诉“点”尊重节点和边的相对顺序
  2. 是否有“点”的替代方案,它尊重相对顺序,即接受布局,并进行物理渲染。

示例.dot

抱歉,无法上传点文件。示例.dot 文件

0 投票
1 回答
237 浏览

algorithm - “堆叠”与“悬挂”分层图形绘制算法的标准名称?

这是绘制相同层次结构的两种不同方法。请注意,在“堆叠”布局中,节点总是比它们最高的“子”节点高一层。(重要提示:请参阅问题底部的编辑以获取另一个示例)

可视化同一图表的两种不同方式

这两种分层绘制方法有具体的名称吗?我正在尝试为“堆叠”算法找到现有算法,但似乎无法显示任何信息,因为我不知道它叫什么。

如果它们没有名称来区分它们,因为它们依赖于相同的算法,那么是否有众所周知的参数集用于使用现有算法获得图形的“堆叠”版本?谢谢!

编辑:虽然上面的图表是严格的“”,但我正在寻找的算法应该能够处理节点有多个父节点的情况,以及从根到叶有多个路径的情况。这是一个例子这是另一个

Edit2:如果它对任何人都有用,带有预先计算的节点层(y 轴约束)的 hacky(和缓慢)强制导向方法似乎可以正常工作。这是它的样子。该示例使用 cytoscape.js 和 cola.js,而且它是颠倒的。这根本不是这个问题的解决方案,所以我只是把它放在这里作为编辑。

0 投票
1 回答
182 浏览

visualization - NetworkX - 连接的列

我正在尝试创建数据可视化,也许 NetworkX 不是最好的工具,但我希望拥有相互连接的并行节点列(2 个单独的组)。我不知道如何在这个布局中放置两组节点。我尝试过的不同选项总是默认为更“类似网络”的布局。我正在尝试创建一个可视化,其中客户/公司(字典中的键)将边缘绘制到产品节点(同一字典中的值)。

例如:

从字典 'd' 中,我们将有一列节点 ["A", "B", "C"] 和第二列 [1, 2, 3] 并在两条边之间绘制。

更新:

所以建议的“pos”参数有所帮助,但我认为在多个对象上使用它有困难。这是我想出的方法: