[Cytoscape|project] 每个node显示数据分布
2019-08-11 本文已影响15人
drlee_fc74
需求描述
cytoscape里面默认的node只能分配一个颜色。想要对每个node在某一份组当中的具体的值。类似这种的

数据准备
cytoscpe图形可视化需要准备的数据包括两个:
- 显示网络数据的文件,其中包括不同node之前的相互作用关系。例如从string数据库中导出的tsv文件。或者自己形成一个一一对应关系的文件即可。

- 每个node的注释文件:这个文件有一个包含所有node的的列,其余的是对于每个node的注释。例如在每个分组当中的值

数据导入
我们通过file - import
导入数据:其中netword from file
导入网络文件。table from file
导入注释文件

图形调整
- Layout调整:导入后的数据是这样的

我们通过调整layout
以及简单的style
可以可以调整为:

- 添加注释图形:cytoscape里面我们一般来设置每个node的颜色可以在
Fill color
以及Border Paint
里面来设置填充色以及边框颜色。但是cytoscape里面还有一个image/Chart
的选项可以让我们来加入图片和简单的统计图形。如果我们需要显示同种颜色可以使用这个选项里面的扇形图

我们点击image/Chart
。可以看到。这里设立选择图片或者的图标。

如果我们选择其中一个图片,我们的node里面就会显示这个图片的内容。例如:

同时我们也可以在open image manager
里面来添加自己想要的图形。
如果我们选择Charts
就可以加载简单的数据图形。这里可以选择的包括:柱状图;箱式图;热图;线图;饼图以及环图。我们在选择pie
同时把想要进行可视化的数据放到右边边框。

点击Apply
即可看到这个对于不同分组占比的可视化了。

如果对图形感觉颜色不满意,我们可以在Options
对颜色以及不同分组之间的边框进行调整


- 显示多个图形;加入我有多个不同分组的数据想要可视化,怎么添加更多类型的图形呢?
在自定义调整当中,系统默认显示的是常用的几个选项。我们可以点击Properties-Paint
就会发现可以添加最多9种自定义图形。同时默认的图形都是在node的中间。所以系统也会提供自定义图形摆放的位置。

例如:我用上面的数据再做个一个简单的柱状图然后放到node的右边。

- 进一步优化:如果细心观察每个node都在添加图形之后,虽然掩盖了node的颜色,但是会有一部分没有掩盖好,这个自己看会影响美观的。

如果要去掉的话,试过把fill color
调整为白色,但是发现也很突兀。

想了想最后把Transparency
透明度0.感觉好了一点。别的实在没有想到别的办法。
