问题标签 [webcola]

我正在使用 cytoscape.js 和可乐扩展，我有兴趣创建一个类似的布局。 这个例子

我希望邻居像示例中那样顺利打开。

当我扩展节点不起作用时，请查看我的代码笔layout.run()，如果我重新创建布局，影响与原始可乐示例中的不同。

https://codepen.io/kemalhur/pen/rrOzEq

谢谢

有没有办法在这里为 d3-cola 强制布局示例添加标签到组

我添加了工具提示：

我尝试添加这部分：

然后在刻度函数中：

但它没有出现。

我有一个函数 buildTree 作为输入 json 数据并使用 d3.js 和 cola.js 将它们可视化。这个想法是我单击一个按钮并将 json 添加到 d3。然后通过单击另一个按钮，我添加了另一个 js 并保留了旧的，所以我最终得到了两棵树。在我的示例中，我有一个节点存在于两个 json 文件中，因此我希望最终将这两棵树连接起来，并且该节点出现一次。

我设法获取现有树，添加新树，删除两次存在的节点并更新链接，但一个链接从未连接到共存节点。

JSON 文件具有以下格式：

第二个：

所以 c 是一个存在于两个 JSON 文件中的节点，并且应该只出现在树中一次，但同时包含两个链接。

buildTree 类似于：

我正在处理 cola.js 示例在此处输入链接描述

我在链接的末尾添加了标记（箭头）。但是，由于节点是矩形的，因此与箭头重叠。我试图通过更改标记的“refX”来修复它，但看起来不太好。

标记的代码是：

然后将其添加到链接末尾：

` cola.on("tick", function () {

我希望允许用户使用d3 forceSimulation或CoLa 布局查看他们的网络，这意味着当用户触发事件时，我需要更改哪些布局算法正在更新我的节点x和y边缘的属性。

特别是，这要求我能够停止模拟并防止它们更新我给它们的数据上的那些属性，而另一个是“活动的”——以及删除与它们关联的拖动处理程序。

我的渲染功能目前有：

一种解决方案可能是破坏这些对象，例如delete d3_force['something_important']

一些更简单的东西可能会起作用，比如d3_force.nodes([])或类似的东西。

我不确定如何做类似于拖动处理程序的事情，因为我不太熟悉它们的工作原理。

更新1：

此处为 d3 拖动处理程序（在 d3v3 中）建议的部分解决方案：

然后稍后恢复它：

我正在尝试使用 viz.js 以外的东西构建一个 graphql 模式可视化器（该库太大并且在包中增加了 1MB）。我被推荐了 webcola，它似乎是一个非常强大的库。

我已经到了正确渲染和链接必要元素的地步。我的下一步是让布局正确。我想做一些类似于graphql-voyager 的事情（使用 viz.js）。

这是到目前为止我所拥有的代码框：

graphql-图

编辑：我的问题是，我如何布置与 graphql-voyager 类似的内容？我想帮助设置正确的约束并应用任何必要的算法来定位节点并相应地路由边缘。

最近了解了一个优秀的 JS 库 cola.js 。它可以进行部队布局和支持小组。在此处了解更多信息：Cola.js

我创建了一个简单的演示来展示具有开放组功能的强制布局。但我对开放行为感到困惑。

我觉得开群的时候，新的布局应该是在上一个布局的基础上做一个小调整。但现在它重新布局所有节点。为什么 ？

我从这个链接中学到了一些理想：Ofical Demo : Online Graph Exploration，看起来很复杂。新节点动态添加到图中的坐标应设置为开放组的坐标。不幸的是，它也无法解决我的问题。

以下是我的演示：

我的 codepen 演示也很好用：Cola open group demo

重新布局是否可能基于上次开放状态？不是新的全面重新布局？

我的公司正在为聊天机器人构建一个图形视图编辑器。我们正在使用 Cytoscape 和cytoscape-cola扩展来实现这一点。我们面临的问题之一是动态地向图中添加新节点，而不会使它们与图上的现有节点重叠。

我查看了以前的类似问题（如下所列），但无济于事：

我在那里尝试了解决方案，即仅在新添加的节点上应用布局，但它们一直堆叠在屏幕的中心。

我尝试了此处提到的解决方案，但无论是一次性锁定节点还是cy.nodes().lock()单独cy.nodes().forEach(node => node.lock())锁定节点，锁定的节点仍会继续移动。这里还需要注意的是，当单独锁定节点时，新添加的节点也会被锁定，无论我是否在上面的调用中锁定。

我也尝试了这个解决方案，但锁定的节点仍然移动并且整个布局发生了变化——有时完全改变，有时只是一点点。

代码

这是我目前用来构建图表的方法：

这是我用来向图中添加新节点的方法：

我想做以下其中一项：

1. 如果我想要完成的事情是可能的但我的代码没有实现它，请了解我做错了什么
2. 了解为什么我无法完成它，即管理它的限制

字典元素的cytoscape.js -cola 文档说：gapInequalitieslayout

您如何设置在left和的值中指定节点的对象right？

maxkfranz 在这里有用地指出这些对象需要是集合对象。这些包含对指定节点（“元素”）的引用，并通过查询 cytoscape.js “核心对象”来创建。我不清楚的是，鉴于layout对象需要引用节点元素，并且在告诉如何渲染它们之前不应将元素添加到图中layout，您如何正确设置这些集合对象？

例如，要指定 nodeb应该放在 node 之上，下面的代码中有a什么代替???a???和？???b???

cy.$id('a')在这种情况下，答案不可能是cy.$id('b')因为cy尚未创建对象。你可以通过创建cy没有元素的对象然后调用cy.add()将它们放入来解决这个问题。但是layout传递给的对象中有cytoscape()什么？

我对cytoscape.js和cola.js都是新手，所以我很可能只是在这里遗漏了一些非常基本的想法。一个简单的示例显示了哪些函数调用设置了对象以及调用它们的顺序可能会做到这一点。在我的应用程序中，节点和边是逐渐添加到图形中的，并且动画需要显示它们正在添加，因此无论如何不要在开始时设置所有元素更有意义。

当 cola.js 失败时，如何找出问题所在？

我没有一个最小的可重现示例，因为这可能需要数小时的调试才能完成，如果我有它，那么它就不是我要问的一个例子。我希望听到一种快速找出问题所在的方法。大概是我的图表中的一些不良数据。但是我怎么知道坏数据是什么？

下面的屏幕截图说明了出现问题的典型情况。报各种 NaN，有一堆 Uncaught TypeErrors，一个 Assertion 失败。有很多局部变量，都用一个字母命名。单击并查看它们表明 NaN 进入某处的坐标，如前面的错误消息所示。看起来早些时候，null当它需要某种类似列表的数据结构时，它得到了一个。如何快速找出图表中的不良数据是什么？

我正在使用cola.v3.min.js.

细节

我正在寻找一种查找此类错误的通用方法，但这里是在此示例中产生错误的特定数据。每一行都是传递给的参数cy.add()（正如 Stepan T. 所建议的那样，打印出传递给的所有内容cy.add()可能是答案的第一步！）。

传递给的对象cy.layout()具有圆形结构，因此JSON.stringify()不会打印它。添加这里getCircularReplacer()推荐的功能似乎会使浏览器崩溃。但是从布局对象中手动删除元素暴露了错误：在相对约束中（在此处记录），我需要 a 的位置的偏移量，即需要数字的字符串。alignmentAPI '0'0

好的，很高兴这个问题现在已经解决了。这仍然留下了最初的问题：有没有更快的方法来找到这样的错误？（静态类型的倡导者现在肯定在咯咯笑。）