-
Notifications
You must be signed in to change notification settings - Fork 3
/
2019_2_18highlights.html
216 lines (194 loc) · 5.42 KB
/
2019_2_18highlights.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!DOCTYPE html>
<html>
<head>
<script src="/includes/head.js"></script>
<title>highlight展示</title>
</head>
<body>
<div class="container">
<h1 class="text-center text-success">之前学完了ideogram的整体布局 <br>现在学习如何进行某个区域的强调展示</h1>
<article>
<p>首先就需要我们有一个指明需要强调的数据文件;表明了在ideogram中需要highlight的区域</p>
<pre id="highlight_data" style="display: none;">
...
hs1 1298972 1300443
hs1 1311738 1324571
hs1 1397026 1421444
hs1 1437417 1459927
...
</pre>
<script>sourceCodeById("highlight_data")</script>
<img src="./image/highlight.svg" alt="" width="70%">
<h2>起到作用的代码部分如下</h2>
<pre id="highlight_code" style="display: none;">
##定义高亮###
<highlights>
###优先画，也就是画在底层
z=0
fill_color*=green
<highlight>
###强调的数据文件
file=data/highlight.txt
r0=0.6r
r1=1.0r-100p
</highlight>
<highlight>
file=data/highlight.txt
#####被强调区域的位置，和长度设置##
r0=0.7r
r1=0.7r+100p
z=5
fill_color*=red
</highlight>
<highlight>
file=data/highlight.txt
r0=1.1r
r1=1.15r
fill_color*=blue
stroke_color=dblue
stroke_thickness=2
</highlight>
</highlights>
</pre>
<script>sourceCodeById("highlight_code")</script>
<p>
从代码上也可以看到，出现了绿、红、蓝三种强调的颜色
<br>当他们在相同的位置显示时，通过z参数可以设置，
当Z越大，它的位置越高看起来也就在上面
</p>
<pre id="highlight_Z" style="display: none;">
hs1 12870075 25724192 fill_color=green,z=37,r0=0.4r-126.289p,r1=0.4r+126.289p
hs1 10044837 11066617 fill_color=blue,z=95,r0=0.4r-100.0388p,r1=0.4r+100.0388p
</pre>
<script >sourceCodeById("highlight_Z")</script>
<h1>在ideogram中展示highlight，同时理解了grid是什么东西</h1>
<img src="./image/recipe.svg" width="70%" alt="">
<p>
图中主要展示的是两类基因，分别以不同的颜色加以区分，蓝色和橙色
</p>
<pre id="recipe_highlight" style="display: none">
<highlights>
##设置所有的highlight的高度
z=5
###将高亮显示在ideogram上
ideogram=yes
fill_color=blue
<highlight>
###重新定义#
file=data/other_genes.txt
z=10
</highlight>
<highlight>
file=data/omim_genes.txt
z=10
fill_color=orange
</highlight>
</highlights>
</pre>
<script>sourceCodeById("recipe_highlight")</script>
<p>
通过在higlights标签中使用ideogram参数来使得高亮在ideogram中显示
</p>
<h1>终于搞懂了grid这个东西是什么了</h1>
<p>
从上面图中也可以看到在每个10的倍数的刻度线上都有一条线对应着,主要靠着三个参数
<br>
<ul>
<li>show_grid</li>
<li>grid_start=0.5r</li>
<li>grid_end=dims(ideogram,radius_outer>)</li>
</ul>
</p>
<pre id="grid" style="display: none;">
show_grid=yes
###网格的展示########
grid_start=0.5r
grid_end=dims(ideogram,radius_inner)
##########对应刻度显示grid##########
<tick>
spacing=10u
size=15p
thickness=3p
show_label=yes
label_size=20p
label_offset=10p
format=%d
grid=yes
grid_color=vgrey
grid_thickness=2p
</tick>
</pre>
<script>sourceCodeById("grid")</script>
<h1>第二种起强调作用的模式</h1>
<img src="./image/recipe2.svg" width="70%" alt="">
<pre id="recipe2_highlight" style="display: none;">
<highlight>
file=data/highlights.txt
r0 = 0.5r
r1 = 1r
fill_color = lgrey
</highlight>
<highlight>
file=data/highlights.txt
r0 = 1r
r1 = 1.1r
fill_color = lyellow
</highlight>
<highlight>
file=data/highlights.txt
r0 = 1.1r
r1 = 1.15r
fill_color = lgrey
</highlight>
</pre>
<script>sourceCodeById("recipe2_highlight")</script>
<p>从源代码上也可以看出来，就是对一个区域，在不同的位置填充不同的颜色，起到的强调效果还不错</p>
<h1>默认情况下highlight优先级比links，data、grids小，可以通过plots标签来提高它的优先级,展示在图层最上面</h1>
<img src="./image/recipe3.svg" width="70%" alt="">
<pre id="recipe3_highlight" style="display: none;">
##最外面的一条highlight
<highlights>
<highlight>
file = data/highlights.txt
r0 = 0.9r
r1 = 0.95r
</highlight>
</highlights>
###里面的highlight
<plots>
<plot>
type=highlight
file=data/highlights.txt
r0=0.8r
r1=0.85r
z=10
</plot>
</plots>
</pre>
<script>sourceCodeById("recipe3_highlight")</script>
<p>
从上图中可以看到highlight部分的图片是在links下面；
<br>而plots标签中，则可以让它在显示在表层
</p>
<h1>总结：</h1>
<p>
highlight的用法主要也就有一下几个地方
<ul class="text-success" style="font-size: 20px;">
<li>数据格式</li>
<li>位置的调整使用ideogram=yes r0 r1 参数</li>
<li>关于Z-Dpeth的理解</li>
<li>以及结合其他图形元素的展示顺序</li>
<li>同时也对links的rules规则和grids网格有了一定的了解</li>
</ul>
<h4 class="text-danger">highlight的部分就学到这里啦！以上内容全部来自circos官网，加上本人的实践；英语水平有限可能存在一些不对的地方，请指正！</h4>
</p>
</article>
<!-- ##################### -->
<footer id="footer">
</footer>
<script>
$("#footer").load("/includes/footer.html.php");
</script>
</div>
</body>
</html>