标签: cytoscape.js

cytoscape.js 是否支持折叠/展开复合节点？

Eg. before collapsing

node1 (-)
--node1.1
--node1.2
------node1.2.1

崩溃后

node1 (+)

用于展开/折叠的 (+) 或 (-) 符号会很棒。

寻找使用复合节点对一组节点进行分组并通过用户交互折叠/展开的选项。如果 cytoscape.js 默认不支持此功能，是否有任何替代方案/解决方法可以达到目标？

我想锁定节点相对于其父复合节点的位置，这样，如果我抓取并拖动父节点，子节点会随之移动，但子节点不能单独抓取。如果我将子项设置为不可抓取和/或锁定，那么它不会与其父项一起移动，但如果我不这样做，它可以被单独拖动，这是我不想要的。这可以做到吗？

如果做不到这一点，有没有一种方法可以以编程方式抓取/取消抓取节点，以便我可以侦听抓取事件，然后抓取父节点？

我们目前正在构建一个Web 应用程序 (AngularJS)，它需要根据动态创建的数据绘制有向无环图（最多 1000 个节点，最多 10000 条边）。

一年多以来，我一直在寻找一个库/工具，它可以计算所需的布局并绘制可以设计样式、缩放和平移、交互式的图表（例如，在鼠标悬停时突出显示子项）。

Graphviz是产生最佳结果的工具，但它还没有真正准备好在网络服务器上使用（特别是因为我无法保证操作系统并且不想这样做）。

我尝试了dagre，它是d3 渲染- 我非常喜欢它，但它有两个主要缺点：1）它并不真正支持排名和聚类 - 这使得输出相当混乱；2）随着图形变得越来越大，其性能也会下降越来越令人无法接受。

接下来看起来真正令人信服的是cytoscape.js，因为输出看起来非常好，并且绘制更大的图形相当快（并允许进行一些性能调整）。但它的标准布局（例如 cose 或宽度优先）不会产生我们需要的输出。

从我目前的角度来看，有两个机会：

1) 使用dagre.js创建布局并使用cytoscape.js绘制结果（布局：“预设”，使用 dagre 布局中计算的节点 x 和 y）。但不支持这种方式的“化合物”/簇。

2）使用[viz.js]（https://github.com/mdaines/viz.js）（Graphviz的一个emscripted Javascript版本，在绘制图表时再次表现不佳）将结果计算为简单的输出格式和再次使用这个结果用cytoscape.js绘制它。

现在我的问题：

1）您还有其他想法如何实现它吗？

2）如果我的想法是正确的，你能给我一些关于如何理想地链接链条的提示吗？

（AngularJS -> REST 后端 -> JSON 到前端 -> 为 dagre 或 viz 重构 JSON -> 计算布局 -> 将结果输入到 cytoscape -> 在浏览器中渲染？！？）并且有机会在我的上进行布局计算Node.js 前端服务器而不是客户端本身（同样是由于性能）？

任何提示和想法都受到高度赞赏。

所以我知道你可以使用函数来计算 Cytoscape.js 中的 css 属性，例如

cytoscape.stylesheet()
  .selector('node')
    .css({
      'width': function(ele) {
        return 12;
    })

我还知道特殊值“标签”可以是属性的值，例如

cytoscape.stylesheet()
  .selector('node')
    .css({
      'width': 'label'
    })

我想知道是否有任何特定的属性可以用来按某种因素缩放标签，例如我想要的是类似的

cytoscape.stylesheet()
  .selector('node')
    .css({
      'width': function(ele) {
        return labelWidth * 1.5; //Where to get labelWidth from
    })

特别是，我希望能够计算椭圆的高度和宽度，以便标签完全包含在椭圆内（可以使用一些数学来计算，例如Ellipseboundingaquartz）。

但我一直无法找到获取 labelWidth 的方法。我确实设法使用 rscratch 来做到这一点，但前提是节点实际上被渲染了两次（例如多个 .selectors），任何从给定元素获取标签宽度和高度的正确方法（或者至少是一种计算它的方法）被渲染？）。

我正在开发一个基于网络的图形可视化/操作工具，并且我正在为此目的评估一堆 JS 库，包括Cytoscape.js、jsPlumb、visjs 。一些高级要求包括：

• 能够显示基于 JSON 数据的节点图（由 Cytoscape.js 开箱即用支持）。

• 支持通过从画布外的调色板拖动并将其放到画布上来创建新节点（Cytoscape-node-add在某种程度上支持此用例）

• 能够通过单击源节点中的特定点并将连接拖动到目标节点上的特定点来连接节点。（主要使用扩展Edge-Editation和Edge-handles支持）

• 一个好的“事件”系统，让封闭系统知道何时发生有趣的事情（例如创建/删除新节点、用户选择节点、用户移动节点等）

我真的很喜欢在 Cytoscape 文档中读到的内容，并且演示表明这是一个非常强大的库。但是，我有以下问题：

• 是否可以为每个节点提供要呈现的 HTML 片段？例如，根据每个节点的“类型”属性（在 json 中指定），我想在每个节点上显示图像、显示一些文本等。该文档提到了节点的背景图像，但这并不是我正在寻找的。

• 是否可以限制用户可以开始拖动的节点上的点以连接不同的节点？我意识到边缘编辑扩展已经提供了一些支持，但是使用它，用户可以开始从节点上的任何点拖动。此外，连接两个节点后，如果用户在画布周围拖动节点，边会围绕节点的边框移动。我想限制这种行为，以便边缘始终附加到源/目标节点上的同一点。

考虑到具体要求，我猜我必须编写自己的 Cytoscape 扩展来完成这些事情。但我想知道是否有一些东西可以重复使用或改变用途。

这是我想要实现的目标的粗略草图。

任何有关这些的帮助将不胜感激。

谢谢

我正在使用 cytoscape.js 制作一个简单的图形网络。我希望每个节点都包含一个 href 以链接到更多信息，或者在悬停时也显示信息。是否可以将此功能添加到 cytoscape 节点？

我正在测试 Cytoscape.js 的渲染性能。

我的图表包含大约 5000 个节点和 5000 个边，没有 x、y 位置，使用 Cytoscape.js 的自动布局。但欧拉布局扩展在渲染完所有节点和边后需要花费超过15秒的时间，在接下来的操作中图形页面的浏览器会卡住一段时间或者响应缓慢。正如所说，Cytoscape.js 受到浏览器性能的限制。我们从java服务器客户端加载json数据，并使用for循环加载数据，然后使用layout.run()来运行自动布局。如何利用大数据提升性能？

具有 x,y 位置的数据会提高性能，对吧？但我们不知道如何在Java中循环x,y位置。能给我看看么？Cytoscape.js 中有用于布局的 java 插件吗？

有什么办法可以让动画连续播放吗？

这是一个使用的演示ani.play()，但它只执行一次。不是连续的。

我想要一个“闪烁”节点。它的大小应该不断增大和缩小，直到用户说停止。

现在，我已经这样做了

var jAni = cy.$('#rose').animation({
  style: {
    'background-color': 'red',
    'width': 75
  },
  duration: 1000
});
jAni.play();

正如文档中提到的ani.play()

我正在使用 Cytoscape.js 构建一个 Web 应用程序，用于可视化蛋白质相互作用数据。

蛋白质（节点）需要具有与代表其染色体位置的字符串相对应的 ID，因为这是通用的。但是，我希望将它们可视化或显示在他们的常用名旁边，而不是他们的 ID 旁边。

知道如何做到这一点吗？Cytoscape 文档似乎没有答案。

我有一个 React 组件，一旦从服务器获取一些数据，它就会呈现 Cytoscape dagre 图。它似乎渲染了一个占据父级右半部分的画布<div id="cy" />。调用cy.center()并将cy.fit()图形本身居中并适合父 div，但仅显示一半的可视化效果，因为包含的画布有一半位于屏幕之外。

设置以下 CSS：

position: absolute;
left: 0;
right: 0;

与所有在线示例一样，在容器上，将使画布居中，但会破坏文档的流程。它还不能解决半尺寸问题。

JSX：

  if (moduleStructure) {
    return (
      <div
        id="cy-module-structure"
        style={{
          position: "absolute",
          left: 0,
          top: 0,
          height: "500px",
          width: "1500px",
          display: "block",
        }}
      />
    );
  }

图形生成代码。获取数据后，React 钩子会调用此方法。

  function generateGraph(nodes, edges) {
    cytoscape.use(dagre);
    const cy = cytoscape({
      container: document.getElementById("cy-module-structure"),
      boxSelectionEnabled: false,
      autounselectify: true,
      layout: {
        name: "dagre",
        nodeDimensionsIncludeLabels: true,
      },
      zoom: 1,
      pan: { x: 0, y: …