问题：
在Cytoscape.js中是否有边缘加权的spring嵌入式布局？
晁砚
我们需要在Angular应用程序中显示节点和边图，我们选择在high charts/amcharts/d3上的Cystoscape中进行。Cytoscape加载速度更快，是唯一一个可以处理1000s节点的库。其他的断裂或滞后。
我们下载了cytoscape应用程序，并能够看到一个布局“边缘加权spring Embedded”。它在一个整体的地球仪一样的布局中展示了我们相互联系的节点。
现在我希望在cytoscape js中也有同样的布局，看起来我们在https://js.cytoscape.org/中只有几个布局
共有1个答案
姬阳曜
我认为有三种选择：
- 复合Spring嵌入器布局COSE
- Bilkent的复合Spring嵌入器布局（用于增强的复合节点布局）cose-bilkent
- 基于约束的布局cola.js
它们都使用某种力定向布局，我认为你应该给他们一个尝试，并使用一个最适合你的需要。您可以为每个布局设置许多参数，因此请仔细查看它们。例如，如果在cola.js布局中将infinite设置为true，您将看到可以移动节点，并看到布局强制它们返回或回到合适的位置：
document.addEventListener("DOMContentLoaded", function() {
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
autounselectify: true,
boxSelectionEnabled: false,
layout: {
name: "cola",
infinite: true,
fit: false
},
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",
target: "1"
}
},
{
data: {
source: "4",
target: "2"
}
},
{
data: {
source: "2",
target: "6"
}
},
{
data: {
source: "6",
target: "8"
}
},
{
data: {
source: "8",
target: "10"
}
},
{
data: {
source: "12",
target: "14"
}
},
{
data: {
source: "14",
target: "20"
}
},
{
data: {
source: "20",
target: "22"
}
},
{
data: {
source: "8",
target: "28"
}
},
{
data: {
source: "28",
target: "30"
}
},
{
data: {
source: "30",
target: "22"
}
},
{
data: {
source: "6",
target: "33"
}
},
{
data: {
source: "33",
target: "10"
}
},
{
data: {
source: "33",
target: "36"
}
},
{
data: {
source: "36",
target: "38"
}
},
{
data: {
source: "38",
target: "4"
}
},
{
data: {
source: "38",
target: "41"
}
},
{
data: {
source: "41",
target: "33"
}
},
{
data: {
source: "44",
target: "38"
}
},
{
data: {
source: "52",
target: "12"
}
},
{
data: {
source: "12",
target: "57"
}
},
{
data: {
source: "46",
target: "30"
}
},
{
data: {
source: "30",
target: "47"
}
},
{
data: {
source: "71",
target: "76"
}
},
{
data: {
source: "76",
target: "66"
}
},
{
data: {
source: "76",
target: "36"
}
},
{
data: {
source: "80",
target: "76"
}
},
{
data: {
source: "22",
target: "86"
}
},
{
data: {
source: "86",
target: "80"
}
},
{
data: {
source: "95",
target: "89"
}
},
{
data: {
source: "89",
target: "90"
}
},
{
data: {
source: "102",
target: "104"
}
},
{
data: {
source: "80",
target: "89"
}
},
{
data: {
source: "104",
target: "109"
}
},
{
data: {
source: "115",
target: "109"
}
},
{
data: {
source: "121",
target: "89"
}
},
{
data: {
source: "121",
target: "115"
}
},
{
data: {
source: "121",
target: "128"
}
},
{
data: {
source: "128",
target: "130"
}
},
{
data: {
source: "141",
target: "128"
}
},
{
data: {
source: "128",
target: "136"
}
},
{
data: {
source: "136",
target: "148"
}
},
{
data: {
source: "148",
target: "149"
}
},
{
data: {
source: "149",
target: "156"
}
},
{
data: {
source: "156",
target: "158"
}
},
{
data: {
source: "130",
target: "164"
}
},
{
data: {
source: "164",
target: "166"
}
},
{
data: {
source: "178",
target: "179"
}
},
{
data: {
source: "184",
target: "178"
}
},
{
data: {
source: "178",
target: "189"
}
},
{
data: {
source: "141",
target: "178"
}
},
{
data: {
source: "104",
target: "103"
}
},
{
data: {
source: "10",
target: "12"
}
},
{
data: {
source: "164",
target: "172"
}
},
{
data: {
source: "22",
target: "104"
}
}
]
}
}));
cy.unbind("tapend");
cy.bind("tapend", "node", function() {
cy.animate({
fit: {
eles: cy.elements(),
padding: 20
},
center: {
eles: cy.elements()
}
}, {
duration: 500
});
});
});body {
font-family: helvetica;
font-size: 14px;
}
#cy {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 999;
}
h1 {
opacity: 0.5;
font-size: 1em;
}<!DOCTYPE>
<html>
<head>
<title>cytoscape-cola.js demo</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<!-- for testing with local version of cytoscape.js -->
<!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->
<script src="https://unpkg.com/webcola/WebCola/cola.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-cola@2.3.0/cytoscape-cola.min.js"></script>
</head>
<body>
<h1>cytoscape-cola demo</h1>
<div id="cy"></div>
</body>
</html>
类似资料：
-
问题内容： 我在玩networkx（Python中的图形库），发现文档说PageRank算法在评分时考虑了边缘权重，但是我想知道更大的边缘权重是更好还是更低的权重呢？ 问题答案： 不久，较大的权重对于传入的节点更好。 PageRank在有向加权图上工作。如果页面A具有到页面B的链接，则页面B的得分会上升，即页面B（节点）输入的次数越多，其得分就越高。 有关更多详细信息，请参见PageRank上的W
-
有一个州（地区），它是根植于节点1的树。该州所有城市（编号从1到N+1)都是通过双向道路连接起来的。你得在每条路上加通行费税。该州有N条公路连接各城市。您必须在道路上分配通行费税，以便最大限度地实现以下所述的功能通行费： 你得把通行费税最大化。根据给定数组A中的通行费税分配道路（每个值只使用一次）。查找获得的最大通行费。 输入格式： 第一行包含 N和一个值始终为2的整数。 那么, 接下来的N条道路
-
我有一个“用户”顶点，其中有几个用户。我有一个“邀请”顶点，它基本上讲述了一个用户发送给另一个用户的邀请。我有一个“sentTo”边，将邀请顶点与用户顶点（邀请的接收者）连接起来。我有一个“sentBy”边，将邀请顶点连接到用户顶点（发送邀请的用户）。sentBy edge有一个“on”属性，它是一个日期对象。sentBy edge还具有“inviterCount”属性，基本上是收件人用户（接收邀
-
我正在azure中使用cosmos图形数据库。 有人知道是否有一种方法可以在两个顶点之间添加一条边，只有当它不存在时（使用gremlin图查询）？ 我可以在添加顶点时这样做，但不能使用边。我从这里获取了执行此操作的代码： 谢谢
-
我试图让Spring Boot中的嵌入式Tomcat记录到我的Log4J2配置中，但它不起作用。 根据这个与外部Tomcat打交道的答案：https://stackoverflow.com/a/28639068/1845463似乎有必要将一些罐子移到$Catalina_home/libs等。我认为这在Spring Boot中是不可能的，不是吗？ 有人设法让log4j2运行，并能够为catalina
-
我的假设是，如果处理器对两个边都有传入项，并且其中一个tryProcess（）返回false，那么将处理另一个边（如果在这样的边上有更多的传入项）。根据哪个边缘停止处理和哪个边缘接受它们来交替传入项。 有时会发生一个处理器实例阻塞tryProcess(#0)，它总是返回false（因为我们希望处理来自其他edge的新项）。tryProcess(#0)被重新调用，而tryProcess(#1)从不被