如何在Cytoscape力导向图中配置连续布局模拟？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在Cytoscape力导向图中配置连续布局模拟？相关的知识，希望对你有一定的参考价值。
我正在使用Cytoscape-JS通过力导向的布局可视化（相当小的）图形。布局算法本身不太重要。目前，我只是做这样的事情（顺便说一下，我正在使用Typescript）：
this.cyLayout = this.cytoscape.elements().createLayout(
name: 'cola'
);
this.cyLayout.run();
有没有一种方法可以具有连续的布局，这意味着每当我拖动一个节点时，都应该连续更新布局，并且网络应该根据力导向算法的规则再次稳定下来。我已经在Google上搜索了很多，但似乎找不到解决方法。在我看来，这是非常标准的行为（默认情况下其他库提供此行为），并且应该可以通过一个简单的选项对其进行配置。
非常感谢您提供解决方案，在此先感谢您！
答案
如果您想使用cola.js，实际上有一个用于此目的的layout属性。
您可以查看cola.js GitHub page，在其中可以找到infinite: true选项。这将无限地继续进行布局计算，并且可以完成您想要的操作：
document.addEventListener("DOMContentLoaded", function()
var cy = (window.cy = cytoscape(
container: document.getElementById("cy"),
autounselectify: true,
boxSelectionEnabled: false,
layout:
name: "cola",
infinite: true
,
style: [
selector: "node",
css:
"background-color": "#f92411"
,
selector: "edge",
css:
"line-color": "#f92411"
],
elements:
nodes: [
data:
id: "1",
label: "P"
,
data:
id: "2",
label: "sucrose phosphate phosphatase"
,
data:
id: "4",
label: "sucrose 6-phosphate"
,
data:
id: "6",
label: "sucrose"
,
data:
id: "8",
label: "invertase"
,
data:
id: "10",
label: "fructose"
,
data:
id: "12",
label: "fructokinase"
,
data:
id: "14",
label: "fructose 6-phosphate"
,
data:
id: "20",
label: "phosphoglucose isomerase"
,
data:
id: "22",
label: "glucose 6-phosphate"
,
data:
id: "28",
label: "glucose"
,
data:
id: "30",
label: "hexokinase"
,
data:
id: "33",
label: "sucrose synthase"
,
data:
id: "36",
label: "UDP - glucose"
,
data:
id: "38",
label: "sucrose phosphate synthase"
,
data:
id: "41",
label: "UDP"
,
data:
id: "44",
label: "fructose 6-phosphate"
,
data:
id: "46",
label: "ATP"
,
data:
id: "47",
label: "ATP"
,
data:
id: "52",
label: "ATP"
,
data:
id: "57",
label: "ADP"
,
data:
id: "66",
label: "PP"
,
data:
id: "71",
label: "UTP"
,
data:
id: "76",
label: "UDP glucose pyrophosphorylase"
,
data:
id: "80",
label: "glucose 1-phosphate"
,
data:
id: "86",
label: "phospho- glucomutase (cPGM)"
,
data:
id: "89",
label: "G1P transporter"
,
data:
id: "90",
label: "P"
,
data:
id: "95",
label: "P"
,
data:
id: "102",
label: "P"
,
data:
id: "103",
label: "P"
,
data:
id: "104",
label: "G6P transporter"
,
data:
id: "109",
label: "glucose 6-phosphate"
,
data:
id: "115",
label: "phospho- glucomutase (cPGM)"
,
data:
id: "121",
label: "glucose 1-phosphate"
,
data:
id: "128",
label: "ADPglucose pyrophosphorylase (pAGPase)"
,
data:
id: "130",
label: "ADP - glucose"
,
data:
id: "136",
label: "PP"
,
data:
id: "141",
label: "ATP"
,
data:
id: "148",
label: "inorganic diphosphatase"
,
data:
id: "149",
label: "P"
,
data:
id: "156",
label: "phosphate transporter"
,
data:
id: "158",
label: "P"
,
data:
id: "164",
label: "starch synthase (simpl.)"
,
data:
id: "166",
label: "ADP"
,
data:
id: "172",
label: "starch"
,
data:
id: "178",
label: "ATP/ADP transporter"
,
data:
id: "179",
label: "ADP"
,
data:
id: "184",
label: "ADP"
,
data:
id: "189",
label: "ATP"
],
edges: [
data:
source: "2",&#以上是关于如何在Cytoscape力导向图中配置连续布局模拟？的主要内容，如果未能解决你的问题，请参考以下文章