我想为我的根节点设置与屏幕上其他节点不同的颜色,我已经做了一些预先工作来识别根节点的值并让它在变量中随时可用.然而,在尝试设计图形时没有任何事情发生,并且很难通过这种方式进行调试.
例:
nodes: [{id = 1}, {id=2}]
var startingNode = 1; //root node
$('#cy').cytoscape({
style: [
{
selector: 'node',
css: {
'content': 'data(id)',
'background-color': 'red',
'color': 'black',
'border-width': '1px',
'border-color': 'black'
}
},
{
selector: "node[content = 'startingNode']",
css: {
'content': 'data(id)',
'background-color': 'purple',
'color': 'black',
'border-width': '1px',
'border-color': 'black'
}
}]
// more info for cytoscape rendering omitted
});
Run Code Online (Sandbox Code Playgroud)
任何输入都会有所帮助!
谢谢,保罗G.
我将节点标签映射到节点“名称”属性,并且当名称更改时,我需要标签在cy画布上进行更新。我一直在用这种风格
style: cytoscape.stylesheet()
.selector('node')
.css({
'color': '#000000',
'content': 'data(name)',
'text-valign': 'center',
'background-color': '#FFFFFF',
'border-width': 1,
'border-color': '#707070'
})
Run Code Online (Sandbox Code Playgroud)
和一个节点
cy.add(
{ group: "nodes", data: { id: "n0", name: 'name' }, position: { x: 100, y: 100 } }
);
Run Code Online (Sandbox Code Playgroud)
并使用更新节点
cy.$('#n0').data('name', 'newName')
Run Code Online (Sandbox Code Playgroud)
使用2.2.10,节点标签(内容)将按预期在画布上更新。由于升级到版本2.3.1,因此不再起作用。任何有关如何再次实现这一目标的建议将不胜感激!
编辑 我不知道为什么不行,但是对于其他有此问题的人,暂时我正在使用eles.flashClass()来非常短暂地删除该节点的节点标签。删除临时类后,将呈现正确的标签。例如
在init上设置的css样式
.selector('node.nolabel')
.css({
'content': ''
})
Run Code Online (Sandbox Code Playgroud)
然后重命名节点
cy.$('#n0').data('name', 'newName').flashClass('nolabel',1) //class applied for 1ms then removed
Run Code Online (Sandbox Code Playgroud)
这有效,但似乎没有必要,我真的很想知道为什么
content: 'data(name)'
Run Code Online (Sandbox Code Playgroud)
无法正常工作-我不知道这是一个错误还是做错了,只是它在版本2.3.0以下才有效
简短的问题:我有一个在递归方面很深入的javascript。如何增加堆栈大小以便执行(在Unix系统中类似于“ ulimit -s unlimited”)?
长话短说:我必须画一个图,并且我使用Cytoscape JS(http://js.cytoscape.org/)和Dagre布局扩展(https://github.com/cytoscape/cytoscape.js-dagre)。绘制算法在递归中深入,最终我在Chrome中遇到“ Uncaught RangeError:超出最大调用堆栈大小”的问题,而在Firefox中却遇到了“太多的递归”问题。如何将堆栈大小设置为无限制或非常大(例如,在Unix系统中就像“ ulimit -s unlimited”),以便可以绘制图形?
谢谢!
我正在使用 Cytoscape.js 构建一个 Web 应用程序,用于可视化蛋白质相互作用数据。
蛋白质(节点)需要具有与代表其染色体位置的字符串相对应的 ID,因为这是通用的。但是,我希望将它们可视化或显示在他们的常用名旁边,而不是他们的 ID 旁边。
知道如何做到这一点吗?Cytoscape 文档似乎没有答案。
我正在使用 cytoscape.js 创建一个图形,并且我在父节点内复合了节点。我想在节点顶部但在节点内部拥有主/父节点的标题。这在细胞景观中可能吗?
我曾尝试使用 halign 和 valign。每当我使用最高值时,它都会显示在框外。
是否有扩展或插件可以让我们这样做?
子节点示例:https : //stackblitz.com/edit/cytoscape-call-method-child-efmbaj?file=src%2Fapp%2FstylesheetObject.ts
我最近发现了Cytoscape.js,并想尝试强制导向的布局:乔木和弹性.
现在,我有几个问题:
是否可以通过使用其中一种布局来实现图形,其中节点放置基于某种算法并且节点坐标不是必需的?例如,在VivaGraphJS中,图形会聚,以便连接的节点形成组,并且单个节点移动到外围.如果这可以在力导向布局上完成,可以关闭力,以便可以在画布上自由选择和拖动节点吗?
Cytoscape如何实际处理大图(节点数/边数)?
假设每个节点和边缘都有五个属性,我想要一个在鼠标悬停时显示这些属性的文本框.最简单的方法是什么?
Wiki说如下所示可以添加单个节点,但是cy没有节点功能; 这是一个错误吗?var n0 = cy.node("n1"); cy.add(N0); //添加一个元素n0
我试图创建一个使用Arbor/Springy的琐碎随机数据图.下面的代码在"return data.cy"中给出了"数据未定义"的错误.当布局"随机"时,代码可以正常工作.我究竟做错了什么?
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.full-height { height: 600px; margin: 0 0; padding: 0 0; }
</style>
<script src="jquery-1.7.2.js"></script>
<script src="demo/cytoscape.all.js"></script>
<script src="demo/extensions/cytoscape.layout.arbor.js"></script>
<script src="demo/extensions/cytoscape.layout.springy.js"></script>
<script src="demo/arbor.js"></script>
<script src="demo/arbor-tween.js"></script>
<script src="demo/springy.js"></script>
<script type='text/javascript'>
function onLoad() {
// create a mapper for node size
var nodeSizeMapper = {
continuousMapper: {
attr: {
name: "weight",
min: 0,
max: 40
},
mapped: {
min: 5,
max: 25 …Run Code Online (Sandbox Code Playgroud) 我正在尝试手动设置节点的起始位置,但从 JSON 结构加载它们。如果我将位置放在“节点”结构中,它就可以工作,但是我试图添加一个名为“位置:”的单独结构,我认为它应该工作?请参阅下面的结构示例。
var graphdata = { nodes: [ { data: { id: 'j', name: 'Jerry', width: 20, height: 20 , shape: 'rectangle' }},
{ data: { id: 't', name: 'Tom', width: 20 , height: 20, shape: 'circle' } },
{ data: { id: 'm', name: 'Mary', width: 20 , height: 20, shape: 'circle' } } ,
{ data: { id: 'b', name: 'Bob', width: 20 , height: 20, shape: 'circle' } } ],
edges: [
{ data: { source: …Run Code Online (Sandbox Code Playgroud) 我想用节点和节点之间的链接绘制一个简单的图表。问题是我希望根据变量设置链接的厚度,因此我无法为此预先确定 CSS 类。
代码来自示例http://js.cytoscape.org/demos/dagre-layout/
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: false,
autounselectify: true,
layout: {
name: 'dagre'
},
style: [
{
selector: 'node',
style: {
'content': 'data(id)',
'text-opacity': 0.5,
'text-valign': 'center',
'text-halign': 'right',
'background-color': '#11479e'
}
},
{
selector: 'edge',
style: {
'curve-style': 'bezier',
'width': 4,
'target-arrow-shape': 'triangle',
'line-color': '#9dbaea',
'target-arrow-color': '#9dbaea'
}
}
],
elements: {
nodes: [
{ data: { id: 'n0' } },
{ data: { id: 'n1' …Run Code Online (Sandbox Code Playgroud) 如何在Cytoscape.js中显示networkx生成的网络?
我已经尝试过由networkx生成的JSON数据,但似乎不起作用。所有的边缘都消失了。networkx生成的JSON如下:
{
"directed":false,
"graph":{
},
"nodes":[
{
"id":"P40012"
},
{
"id":"P53963"
},
{
"id":"Q12265"
},
{
"id":"P35728"
},
{
"id":"P53270"
},
{
"id":"P40559"
},
{
"id":"P53066"
},
{
"id":"P52960"
},
{
"id":"P47125"
},
{
"id":"Q04895"
},
{
"id":"P54074"
},
{
"id":"P21672"
},
{
"id":"P53077"
},
{
"id":"P36145"
},
{
"id":"P31109"
},
{
"id":"P35194"
},
{
"id":"Q12447"
},
{
"id":"P43580"
},
{
"id":"Q04659"
},
{
"id":"P53170"
},
{
"id":"Q12377"
},
{
"id":"Q3E742"
},
{
"id":"Q05787"
},
{
"id":"Q06263"
},
{ …Run Code Online (Sandbox Code Playgroud) 我想将选定节点的颜色更改为与预定义背景颜色不同的颜色。但是,只要我在“样式”中为节点定义了背景颜色,颜色就不会更改为蓝色(默认行为)。
这是我定义的样式:
selector: 'node',
style: {
'content': 'data(d2)',
'background-color': '#ccc',
}
Run Code Online (Sandbox Code Playgroud)
有人可以帮忙吗?拉兹卢
cytoscape-web ×11
cytoscape.js ×9
javascript ×4
cytoscape ×3
css ×1
dagre ×1
graph-theory ×1
networkx ×1
python ×1
python-2.7 ×1
recursion ×1
size ×1
stack ×1