问题标签 [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.
layout - Graphviz 网格对齐
我正在尝试为必须在网格中布置所有元素的图形生成布局信息。我希望所有坐标都是网格框大小的整数倍。
例如,如果我有一个由 1 英寸正方形组成的网格,我希望所有节点坐标都是 72 的倍数(如果我没记错的话,一英寸的点数)。我喜欢点的分层布局,所以如果可能的话,这就是我想使用的工具。
我已经多次查看元素属性列表,但我还没有弄清楚如何做到这一点。
编辑:
我选择 GraphViz 的原因是它可以执行布局,然后将该信息作为文本返回。其他工具似乎只是想渲染一个图,但我想在其他地方渲染,我只需要获取布局信息。
svg - 导出 SVG 时,Cytoscape 等效于 graphviz URL/href 节点属性?
过去,我使用 graphviz 的节点“label”、“URL”(或“href”)和“tooltip”属性来生成 SVG 图形,其中节点具有文本标签,鼠标悬停显示工具提示,然后单击节点(假设您的浏览器正在显示 svg)将您带到 URL 目标(并且所有这些字符串都可以不同)。
现在我正试图在 Cytoscape 中生成同样的东西。导出 svg 效果很好,但节点到外部 URL 的链接似乎都与 Cytoscape 的“链接输出”功能相关联;虽然这在您实际使用Cytoscape 时似乎非常强大,但我不清楚是否有某种方法可以让它在导出的 SVG 中生成可点击的节点或标签(我愿意接受)。我要链接到的 URL 是我导入的图形的节点属性。
Cytoscape 中是否缺少我会在导出的 SVG 中创建链接的东西?对替代方法有什么建议吗?例如,某种使标签成为任意 HTML 的方法,包括<a href=...>...</a>
?
我的“计划 B”是对导出的 SVG 进行后处理,但让 Cytoscape 完成这一切会更好。
graphviz - 带有点/graphviz 的框图布局
我想用点实现以下模型:
到目前为止,我有这么多:
我像这样编译它:
点 -Gsplines=none test.gv | 整洁 -n -Gsplines=ortho -Tpng -otest.png
这让我很接近,但有几件事我想知道。
我怎样才能在 Foo 的左侧和右侧获得块,而不仅仅是右侧?我还没有弄清楚。
是否可以将边缘标签始终放在边缘上方或下方?
如何将右侧节点向左对齐,左侧节点向右对齐?一种可能性是使它们具有相同的宽度,这没关系。
谢谢!!
更新:
根据接受的答案,我现在正在执行以下操作,这正是我需要的,再次通过点管道生成到neato,如上所述:
python - 家谱的 Python simplepyged 图形表示
有谁知道使用 python 包 simplepyged(用于解析 gedcom 文件)来图形表示家谱的方法?XY-图片?马特库图?象形文字?
我很感激任何帮助!
谢谢!
graphviz - 点中框图的节点布局更好
在上一个问题(带有点/Graphviz 的框图布局)之后,我还有其他问题。以下是这样编译的:
点 -Gsplines=none test.gv | 整洁 -n -Gsplines=ortho -Tpng -otest.png
我的问题是如何获取 Baz 和 Darjeeling 节点并将它们移动到左侧以降低中间节点的高度。我不知道是什么决定了这一点。我知道这是一个有向图,所以图表的一般“流程”是从左到右的,我只是想要更多的控制。
这些图表将自动生成,因此最好解释一下如何按我的意愿布置它以及为什么,而不是让它适用于这个特定示例的代码片段。
java - 图形布局:重新布局保留绘图的形状
我想绘制一个由节点和边组成的图形,使用弹簧布局算法(一种力导向布局)一旦布局了图形,我想让用户交互地添加新节点,并让布局演变,即在保持先前“形状”的同时定位新节点(不要过多地移动已经定位的节点)。
我的意思是WordVis在http://www.wordvis.com所做的事情。
我目前正在使用GraphDracula库中提供的弹簧布局器。这是一个“简单”的,这意味着如果你重新布局图形,你可能会得到一个完全不同的布局(我认为这是由于Math.rand
算法中的调用)
做我想做的事情的算法/策略是什么?
我看到 graphdracula 的布局器将初始节点 pos 设置为零,然后迭代以计算最终节点的位置。假设我添加了一组与:newNodes
相邻的节点expandedNode
以保持现有形状,是否足以将每个 的初始位置设置为newNodes
一个,expandedNode
然后再次将力施加到所有节点?
您是否有任何指向算法的指针,该算法不仅可以将图形布局一次,而且还可以让您添加新节点来重新布局整个图形而无需过多更改绘图?
欢迎任何提示。
我目前正在使用 javascript,但语言并不重要。
neo4j - 为 Neo4j 配置 TypeRepresentationStrategy
我们目前正在使用 neo4j 开发一个 Java 项目。
我们使用Spring Data Neo4j并从Good Relationships书中获取大部分信息。
该文档指出,图中的标准实体类型表示是IndexingNodeTypeRepresentationStrategy。
对于我们的项目,我们更喜欢带有子引用节点的那个。
在使用存储库时,我们如何配置 neo4j 以使用此策略。我们从 HelloWorld 示例开始,因此我们目前有一个存储库接口,如下所示:
此外,我们还有我们的节点实体(我省略了大部分不相关的代码):
谁能提供一个如何设置TypeRepresentationStrategy的小例子?
这可以在 Spring 配置中完成吗?
配置将是:
编辑:
在另一个会话之后,我终于能够让它工作了!我开始基于 Michael Hungers 的回答,但无法创建 Bean。我发现他的例子可能来自:gitHub。但是,这仍然对我不起作用。我开始深入研究 TypeRepresentationStrategyFactory 类的源代码。我发现, Strategy 是一个私有枚举。这是我试图提供的第二个构造函数 arg。在我的项目中,它从未将其检测为 Strategy 类型。
首先我有点怀疑,因为战略是私人的。我的意思是,我什至无法在代码中实例化 TypeRepresentationStrategyFactory,因为它找不到类型 Strategy。我很快发现,据说 Spring 可以做这样的事情:Beans with private constructor。
最后我不得不调整 Michaels 解决方案,因为它没有识别构造函数参数。不管我做了什么。也许这是我的设置,我真的不知道。但最后我想出了从私有枚举创建一个 bean并将其作为对构造函数的引用的解决方案:
geometry - 通过点平滑曲线,仅使用水平、垂直线和固定半径弧
给定一个有序的点列表,我想绘制一条穿过所有点的平滑曲线。曲线的每个部分可以是水平的、垂直的或具有给定半径 r 的弧(所有弧将具有相同的半径)。过渡应该是平滑的,即一个部分结尾的标题应该与下一部分开头的标题相同。任意两个连续输入点之间可以有任意数量的圆弧或直线段。
它有点像火车轨道,应该正交或沿着具有固定曲率的部分运行。
有没有好的算法来构造这样的曲线?(或者,在不可能有这样一条线的情况下,我想知道这一点。)
我研究了贝塞尔曲线,但这似乎有点过头了,我找不到一个很好的方法来执行我的约束。
javascript - Javascript图形布局引擎
我正在寻找可以进行图形布局的 Javascript 库/引擎。(当我说布局时,我的意思是在逻辑上很好地定位顶点。)我正在使用的图形都是 m-ary 树。M 通常不超过 5 或 6,但在某些情况下可以更大。
我确实有一些我现在使用的东西,Graphviz 的节点程序,它运行良好。问题是,在运行 Web 应用程序时,每次需要布局时,我都必须向服务器发送请求。最好,我想要一些用 Javascript 编写的可以在客户端快速运行的东西。它需要做的就是提供布局信息(相对定位等)。我不需要它来绘制画布或使用 SVG 或任何东西,我感兴趣的只是布局。
像 jQuery 或 RaphaelJS 这样的库对我来说很好。我会处理它。我只是在寻找一些东西来加快速度。
另外,如果我能找到一个很好的算法描述来做布局,我会考虑自己写。但我真的不想花太多时间。我现在有一些可以工作的东西,所以在客户端获得它只是一个奖励,而不是必需品。