cytoscape.js - 用户移动节点后，如何在 Dash/Cytoscape 中找到节点的位置？-6ren

cytoscape.js - 用户移动节点后，如何在 Dash/Cytoscape 中找到节点的位置？

转载作者：行者123 更新时间：2023-12-05 05:11:26

24

4

我在 Plotly/Dash 中使用 Cytoscape，我正在创建一个简单的图表。然后我将几个节点移动到不同的位置。然后我尝试在 Dash 回调中读取这些位置 - 我已经尝试过:

State("cytoscape-graph", "stylesheets")
State("cytoscape-graph", "layout")
State("cytoscape-graph", "elements")
或多或少我能找到的任何东西in the docs here

示例节点:

{'data': {'id': 'id0', 'label': 'Node 0'}, 'position': {'x': 50, 'y': 150}},
         {'data': {'id': 'node1', 'label': 'Node 1'}, 'position': {'x': 200, 'y': 100}},
         {'data': {'id': 'node2', 'label': 'Node 2'}, 'position': {'x': 200, 'y': 200}},
         {'data': {'source': 'node0', 'target': 'node1', 'id': '4300352b-9533-4fef-90ec-7a5cbff1f8c4'}},
         {'data': {'source': 'node1', 'target': 'node2', 'id': '33d4c841-bcfc-4a07-ac56-90d36982601a'}},
}

以上要么返回None，要么返回不包含相关信息的任何其他内容，要么返回初始节点位置。我试着查看呈现的源代码，但我似乎无法在那里找到信息；只有一个 canvas 元素。即使对于 Javascript 后端，我也会很感激。

最佳答案

编辑:似乎 Dash 不允许直接访问 ...elements().jsons() 所以问题的答案是纯粹使用 Dash 可能是不可能的。每次单击节点时，您可能必须编写回调以在 javascript 中运行它并将其输出到某个隐藏的 div，然后在 Dash 中读取它。~感谢 OP 回答了这个问题

正如本 section 中指出的那样的文档，很容易实现。 cy.elements()/nodes()/edges().jsons() 方法获取集合中所有指定元素的纯 JavaScript 对象表示的数组。

var json;
var cy = (window.cy = cytoscape({
  container: document.getElementById("cy"),

  boxSelectionEnabled: false,
  autounselectify: true,

  style: [{
      selector: "node",
      css: {
        content: "data(id)",
        "text-valign": "center",
        "text-halign": "center",
        height: "60px",
        width: "100px",
        shape: "rectangle",
        "background-color": "data(faveColor)"
      }
    },
    {
      selector: "edge",
      css: {
        "curve-style": "bezier",
        "control-point-step-size": 40,
        "target-arrow-shape": "triangle"
      }
    }
  ],

  elements: {
    nodes: [{
        data: {
          id: "Top",
          faveColor: "#2763c4"
        }
      },
      {
        data: {
          id: "yes",
          faveColor: "#37a32d"
        }
      },
      {
        data: {
          id: "no",
          faveColor: "#2763c4"
        }
      },
      {
        data: {
          id: "Third",
          faveColor: "#2763c4"
        }
      },
      {
        data: {
          id: "Fourth",
          faveColor: "#56a9f7"
        }
      }
    ],
    edges: [{
        data: {
          source: "Top",
          target: "yes"
        }
      },
      {
        data: {
          source: "Top",
          target: "no"
        }
      },
      {
        data: {
          source: "no",
          target: "Third"
        }
      },
      {
        data: {
          source: "Third",
          target: "Fourth"
        }
      },
      {
        data: {
          source: "Fourth",
          target: "Third"
        }
      }
    ]
  },
  layout: {
    name: "dagre"
  }
}));
cy.ready(function() {
  console.log('Nodes:', cy.nodes().jsons());
  console.log('Edges:', cy.edges().jsons());
  console.log('Elements:', cy.elements().jsons());
});

document.getElementById('save').addEventListener('click', function() {
  json = cy.json();
});
document.getElementById('load').addEventListener('click', function() {
  cy.json(json);
});

body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 85%;
  width: 100%;
  float: right;
  position: absolute;
}

<html>

<head>
  <meta charset=utf-8 />
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
  <script src="https://unpkg.com/cytoscape@3.3.0/dist/cytoscape.min.js">
  </script>
  <!-- cyposcape dagre -->
  <script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
  <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>

<body>
  <b id="save" style="cursor: pointer; color: darksalmon">Save graph</b> / <b id="load" style="cursor: pointer; color: darkmagenta">Load graph</b>
  <div id="cy"></div>
</body>

</html>

关于cytoscape.js - 用户移动节点后，如何在 Dash/Cytoscape 中找到节点的位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55444768/

24

4

0

文章推荐： directx-12 - 应该如何使用 SetDescriptorHeaps？

文章推荐： Lua 错误尝试索引全局 nil 值

文章推荐： python - 将相似范围的数字组合在一起的功能？

文章推荐：强制 : wanted to Multiline description

java - 资源文件由 Gradle 找到，但不由 Eclipse 找到
这个问题在这里已经有了答案: Different ways of loading a file as an InputStream (6 个答案) 关闭 8 年前。在我的 gradle java
ruby-on-rails - Ruby:使用 class_eval 定义常量只能通过 const_get 找到，但不能直接通过::lookup 找到
给定一个 User 类: class User end 我想使用 .class_eval 定义一个新常量.所以: User.class_eval { AVOCADO = 'fruit' } 如果我尝试
jQuery 找到 self
这可能听起来很奇怪，但我正在开发一个需要查找 div 内的元素或 div 本身的插件。脚本根据用户选择查找元素，但内容(包括标记)是可变的。因此脚本将按如下方式查找元素: $('.block').f
c - 找到的输出？
关闭。此题需要details or clarity 。目前不接受答案。想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 7 年前。 Improve th
c++ - 对的多重集，找到
我需要在按我自己的函数排序的对的多集中查找并删除一个值。显然， .find 总是将迭代器返回到末尾，而不是返回到搜索到的值。有小费吗？这是函数: struct cmp { bool operato
c++ - 迭代，找到
求助!我将如何通过遍历查看字符并计算有效字符出现之前的下划线数量来查找和删除前导下划线。以及从字符串末尾向后迭代以查找任何尾随下划线。我可以使用下面的方法来删除下划线，但是如何迭代才能找到下划线。
jQuery - xpath 找到？
如果你在 $(xml) 中有下面的 xml，你会变得懒惰: $(xml).find("animal").find("dog").find("beagle").text() 在 jQuery 中是否有类
macos - 找到 4 个文件的交集
你如何找到4个文件的交集？我用了grep -Fx -f 1.txt 2.txt 3.txt 4.txt ，但它似乎只适用于 2 个文件。同样comm -12 1.txt 2.txt无法扩展为 4 个
aruco - 找到 aruco 标记的中心
我已经完成了标记的姿势估计并获得了 rvec 和 tvec 值。我不知道如何找到它的中心，因为我需要绘制一个需要中心值的圆柱体。我该怎么做？最佳答案标记的 tvec 是标记从原点的平移 (x,y
list - 找到 2 个双向链表的交集
我有一个任务，我需要找到 2 个单链接(单对单)列表的交集。我还必须为 2 个双向链接(双重 vs 双重)列表执行此操作: 对于单链表，我使用 mergeSort() 对两个列表进行排序，然后逐项比较
r - 找到 R 中最大的特征值
我是 R 的新手，我有一个 100x100 的方阵。我想找到这个矩阵的最大特征值。我试过了 is.indefinite(x) 但是它写 is.indefinite(x) : argument x is
javascript - 找到 svg 路径元素的中心
您好，我是 svg 和 JavaScript 的新手，当鼠标位于 svg 上方时，我试图使一些 svg 元素弹出(通过缩放)，反之亦然，当鼠标离开 svg 元素时。我已经能够通过使用转换使 svg
scala - ;预期但<将您最喜欢的关键字放在这里> 找到
我正在尝试为 scala 项目编写一个类，但在多个地方使用 class、def、while 等关键字出现此错误。它发生在这样的地方: var continue = true while (conti
python - 找到 Pandas 时间序列之间的相关性
我有两个 pandas 数据框，它们只取自一列并将日期列设置为索引，所以现在我有两个 Series。我需要找到这些系列的相关性。这里有几行来自dfd: index change 2018-
vagrant - 找到 Vagrantfile 文件夹
我正在尝试调整我的 Vagrantfile，因此如果它丢失，它会自动在项目根目录中创建一个文件夹。创建文件夹没问题，但我无法找到创建该文件夹的位置。我发现此信息可在 Vagrant::Environ
jquery - 找到
的位置
我正在尝试在 jquery 中找到 Test3 的位置，请有人引导我走上正确的道路。我需要jquery来显示5 Test7 Test2 Test6 Test5 Test3 Test8 谢谢最佳
jquery - 找到:contains?的图像src
大家早上好我有一个像这样的图像列表: 使用 jQuery 如何查找 ul#preload 中包含特定字符串(例如“green”)的所有图像 src 类似... var new_src = j
excel - 找到 Excel 工作表中最后使用的行单元格
我正在开发一个修改 Excel 文件的应用程序。如何找到任意行中最后使用的单元格？示例:行号 => 5 中最后使用的单元格最佳答案要找到一行中的最后一个单元格，您需要 Range 的 End
javascript - 找到 JWT 后如何导航一次？
我刚刚陷入 react native ，需要一些帮助才能在找到 token 时导航到 protected 屏幕。我应该在哪里寻找应用程序加载时的 token ？如何在不多次调用导航的情况下导航用户一次
javascript - 找到 JQuery 元素但不可点击
非常奇怪...此页面是 protected 内容还是我不知道的内容？我尝试单击下一页 anchor 。参见this page first. 我试图用这个来抓取元素 var buttonNext =

首页

博学

6Ren·AI

商城

cytoscape.js - 用户移动节点后，如何在 Dash/Cytoscape 中找到节点的位置？