Javascript 如何在cytoscape中创建从特定节点到画布边界的直线？ 我在中栏有一篇文章，侧面有两个图，它们是“祖先”和“后裔”的细胞图。 我想从上一代“祖先”的文章到中间的文章，即CytoPaCe图的边界，显示一个“边”。< /P>

这就是它现在的样子：

它应该是这样的：

---

Cytoscape为我们提供了一些令人惊叹的工具，但它不应该与html元素一起用于显示层次结构

这个问题的解决方案是什么？实现这一点的主要方法应该是使用图像布局和某种形式的qTip HTML的单/多实例dagre图：

使用这些工具，您应该尝试逐步构建图形：

• 让所有扩展运行
• 用数据构建一个dagre图（布局：根是文章，顶树是祖先，底树是子树）
• 将图像添加到图形中
• 将qTip添加到根目录

---

我不确定在Cytoscape.js

div

之上添加另一个HTML内容是否是个好主意。我也不知道您是否有一个或两个Cytoscape.js实例（每个图一个）

在任何情况下，您都有以下选项：添加虚拟节点并使其样式透明，使其不可见。然后将其放在文章的侧面，并将边从

按长度排序

添加到此虚拟节点。您可以锁定此节点并使其不可抓取，以便用户无法与其交互

这种方法的一个主要问题是，某些布局不符合

锁定

状态，因此虚拟节点将在布局上四处移动。但当布局停止时，您可以将它们带回来

---

另一个选择是在Cytoscape.js画布上添加另一个画布，然后自己绘制边缘。

我不明白你想做什么。您能提供表示您迄今为止所做工作的代码片段吗？至少一个屏幕截图会有帮助。cytoscape画布就是这样，一个画布。您对cytoscape中的外部内容一无所知，因此您可能必须使用cytoscape，而不使用中间的列。（我将添加一个可能的替代方案作为答案，请看一看）@StephaT。它不需要知道任何关于外部的信息，只需从上一代中的所有节点到右边框绘制一条直线。边框只是一个框，你可以看到，cytoscape图形比这个大得多，视口不够，你无法绘制到边框的边，你需要两个节点来创建一个边缘…请用你目前的努力和可能与你的概念的图像的例子来阐明你想要什么。否则，我们无法判断您的目标是否可以实现。谢谢你的观点，但是你如何计划不同的屏幕尺寸呢？处理任何尺寸变化和用户交互，这难道不是一件痛苦的事吗？尤其是在中间的文章div中，使用额外画布句柄的Cytoscape.js扩展如何调整大小？您将需要侦听窗口调整大小事件，并根据Cytoscape.js容器更新画布的尺寸。我尝试了这一点，但我在这里遇到的问题是Cytoscape捕获悬停和单击事件，因此文章中的链接、字段和按钮不起作用。

//instead of qTip you can also use popper.js with tippy