Cytoscape作图,边和节点的颜色设置

Step1:导入数据。数据至少有三行

其中第列行和第二列为基因名称(SNP名称),第三列为权重。在同一行中表示第一列和第二列相互作用,而且权值为第三列的数据,如下图,第一列选source 第二列选target,第三列选edge attribute。


step2:导入进来后自动画出图如下


step3:将上图进行美化


style选项卡里选择自己虚幻的样式

step4:改变节点大小作为权重,节点的连通度越高,节点越大

(1)首先,计算节点的连通度:Tools--Network Analyzer---Network Analysis--Analyze Network---treat the network as undirected


我们只保存name和degree这两列


将这两行内容复制到EXCEL中,EXCEL中选中第一列,选择数据--删除重复项


将此表格导入cytoscape,



Tools--Network Analyzer---Network Analysis-----Generate Style from Statistics

可进行如下设置:值越小点越小,值越小边越细




到此为止,观察可见,连通度越大则点越大

(2)点击上方的view---show graphic details;则可显示节点的标签

(3)将节点调整成我们想要的颜色


column选择Degree,Mapping Type选择Continuous Mapping,点击剪头所指的地方即可重新设置颜色


点击左边剪头所指的下指剪头即可调整颜色


如图所示,即可将节点的颜色调整好


step5:调整边,不同颜色表示的权重不同

进行如图所示的设置



如图,我们将节点和边的大小和颜色设置好了

step6:对个别顶点进行设置:

点击图中将要设置的顶点即选中,按住shift键连续点击即可选择多个顶点。




点击style选项卡中剪头根部的地方,即可对选中的节点重新设置颜色。

最终结果如下图所示:


  • 21
    点赞
  • 101
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
您好,针对您的问题,我理解您想要在 Cytoscape.js 中实现节点的展开和收缩功能,并且想要通过 cxtMenu 来实现。在 Cytoscape.js 中,节点的展开和收缩可以通过 `collapse` 和 `expand` 方法来实现。而在 cxtMenu 中,则需要通过自定义菜单项来触发这些操作。 具体实现方法如下: 1. 在 Cytoscape.js 的配置中添加 cxtmenu 插件,并定义需要显示的菜单项。例如: ```js import cytoscape from 'cytoscape'; import cxtmenu from 'cytoscape-cxtmenu'; cytoscape.use(cxtmenu); const cy = cytoscape({ container: document.getElementById('cy'), elements: yourElements, style: yourStyles, layout: yourLayout, // 添加 cxtmenu 插件并定义菜单项 cxtmenu: { selector: 'node', commands: [ { content: 'Collapse', select: function(ele){ ele.collapse(); } }, { content: 'Expand', select: function(ele){ ele.expand(); } } ] } }); ``` 2. 在菜单项中定义 `select` 方法,当用户点击菜单项时,调用 `collapse` 或 `expand` 方法来改变节点的状态。例如: ```js { content: 'Collapse', select: function(ele){ ele.collapse(); } }, { content: 'Expand', select: function(ele){ ele.expand(); } } ``` 需要注意的是,`collapse` 和 `expand` 方法需要在 `cola` 布局插件加载后才可用。因此,您需要在 Cytoscape.js 的配置中添加 `layout` 属性,并使用 `cola` 布局插件。例如: ```js import cytoscape from 'cytoscape'; import cola from 'cytoscape-cola'; cytoscape.use(cola); const cy = cytoscape({ container: document.getElementById('cy'), elements: yourElements, style: yourStyles, layout: { name: 'cola' }, // 添加 cxtmenu 插件并定义菜单项 cxtmenu: { selector: 'node', commands: [ { content: 'Collapse', select: function(ele){ ele.collapse(); } }, { content: 'Expand', select: function(ele){ ele.expand(); } } ] } }); ``` 通过上述方法,您就可以在 Cytoscape.js 中实现节点的展开和收缩功能,并且通过 cxtMenu 来触发这些操作了。希望能对您有所帮助。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值