介绍

本文档为开发人员提供了一组关于如何正确呈现反应途径图的开发人员指南。途径图表示作为一系列连接的分子事件的途径，在反应中已知为“反应”，其可以被认为是途径中的步骤。有关图表的更详细指南，请参阅我们的用户指南．

目前，有两个项目遵循以下指导方针：

• 图表：https://github.com/reactome-pwp/diagram.
• 图 - 出口商：https://github.com/reactome-pwp/diagram-exporter

凋亡调控图

图表布局和图形文件

所有的类图都可以以xmi(雨伞)格式的UML找到。下载

每张图的布局信息存储在JSON文件中，以其稳定标识符命名，即，即r - hsa - 12345. - json．此文件包含有关绘制的内容以及如何绘制它的所有信息，包括坐标和大小。除了布局文件外，extome还提供了另一个包含图表内容的小图形视图的另一个JSON文件，即r-hsa-12345.graph.json．我们将更详细地讨论此图表图文件。

图表的一般结构布局文件：

{“dbid”：169911，“稳定性”：“r-hsa-169911”，“displayname”：“细胞凋亡的调节图”，“疾病”：false，“minx”：61，“maxx”：1126，“MINY“：202，”MAXY“：656，”节点“：[]，”边缘“：[]，”隔间“：[]，”注意“：[]，”链接“：[]，”阴影“：[]}

获取更详细的图表描述布局，展开以下树:

图表对象

图布局由六种类型的元素组成：

• 隔间
• 节点
• 边缘
• 链接
• 笔记
• 阴影

这些元素遵循此层次结构。

隔间

分隔在背景中呈现，代表反应发生的地方。它们被渲染为圆角矩形使用nodeCommon.prop.prop.prop.．被膜包围时的隔间可能具有额外的层，必须使用nodeCommon.innerprop。文本 （divellobject.displayname.)显示在一行中，使用NodeCommon.textPosition。颜色从图表剖面表中取出（个人资料)．无法在任何其他节点的顶部呈现隔间。

节点

节点代表反应的参与者，即输入，输出，催化剂，调节剂和其他途径。每个节点的类型被编码为renderableclass。可呈现类可以是其中之一化学，ChemicalDrug，复杂，实体，实体，基因，过程，包封器，蛋白质和RNA。

节点位于2层，背景和前景中。为每个类的不同形状呈现背景，其中尺寸定义为nodeCommon.prop.prop.prop.．一些节点可能有前景（processnode.那EncapsulatedNode和EntitySet)．前景的形状和颜色是特定于类的。文本以节点为中心，填充5个点nodeCommon.prop.prop.prop.．如果它太大，则它被包裹在几条线条，如果需要，则缩短字体的大小。当前景存在时，文本填充到前景限制。

*基因使用不同的方法来组成。它们有2个形状，一个带有2个圆角的矩形（Y = NodeCommon.prop.y + 25）和三角形。矩形填充但没有抚摸。两种形状都是使用3个垂直线的关节。

shape = semiroundedrectangle（prop.x，prop.y + 25，prop.width。prop.height）arrow = path（）arrowmoveto（prop.maxx，prop.gety + 8）arrow.lineto（prop.maxx，prop.gety  -  8）arrow.lineto（prop.maxx + 8，prop.gety）arrow.closepath（）路径= path（）pathmoveto（prop.x，prop.y + 25）path.lineto（prop.maxx，prop.y + 25）pathmoveto（prop.maxx  -  4，prop.y + 25）path.lineto（prop.maxx  -  4，prop.y）path.lineto（prop.maxx，prop.y）＃已经关闭填充（形状，箭头）行程（路径，箭头）

核糖核酸的形状照顾骨骼：

x1 = rna。X + 16 x2 = rna。maxX - 16y1 = rna。Y + 8 Y = rna。maxY - 8 path = path()路径。函数(x1, y1)路径。线To(x2, y1) path.quadTo(rna.maxX, rna.y, rna.maxX, rna.centerY) path.quadTo(rna.maxX, rna.maxY, x2, y2) path.lineTo(x1, y2) path.quadTo(rna.x, rna.maxY, rna.x, rna.centerY) path.quadTo(rna.x, rna.y, x1, y1) fill(path) stroke(path)

一些节点包含附件，如翻译后修饰(PTMs)。附件以其所有者的样式显示。除了具有自定义边界形状的基因外，节点的边界是在背景和前景形状之后呈现的。当一个节点具有nodecommon.needdashedborder.然后必须破坏边框。

药物使用与化学品相同的形状，但用不同的颜色。它们还在右下角有一个小反射射（14x7），文本Rx（配方，处方的配方，拉丁语）。

边缘

在图中，边表示反应。它们的布局是带有形状的线条。它们可以有两种形状:a反应形状，表示反应的类型，以及末端形状．两者都可以省略。线取自EdgeCommon.Segments.．使用内部的几个属性创建形状EdgeCommon.．

属性中指定的形状形状元素内Edge.Realctiontype.和Edge.endShape．

当形状存在，价值形状写在形状的中心。当shape.emtpy.是真的，形状充满了Profile.reaction.fill颜色(通常是白色)，否则，它就充满了profile.reacreath.troke.（通常是黑色的）。

连接器

当每个反应都有几个参与者时，在参与者中创建一个连接器连接器=DiagramObject。Id．连接器在它们所属的反应后是风格的。连接器具有段和2个形状：末端形状和化学计量形状．只有当化学计量值大于1时，化学计量总是空的方框，并以化学计量值作为文本。

链接

链接用于链接相关的元素，这些元素是相关的，通常的细分道或遥远节点。

笔记

笔记只是文本。文本以一行开始显示NodeCommon.textPosition。颜色取自Profile.note.text．

阴影

当在同一个图中有多个子路径时，使用阴影。特别地，这些彩色矩形突出了属于每个子路径的特定图表反应，允许进一步放大到给定路径图中感兴趣的区域。呈现它们是可选的，但建议将它们绘制在每个元素的顶部，如矩形，使用shadow.points.和shadow.color.用于文本和填充。它还建议使用填充的透明度，以便所有细分参与者都是可见的。该文本包含子路线的名称，应该使用更大的字体大小呈现。

文本

文本的默认字体是Arial黑色，大小为9。对于阴影，字体大小为24。

染色

元素颜色取自JSON样式表。目前我们有两种款式:标准和现代的．

要获得关于图表颜色配置文件的更详细描述，请展开以下树:

这DiagramProfileNode每个节点定义3种颜色：填充，中风和文本．如果一个对象淡出(DiagramObject.isFadeOut),然后我们必须选择fadeOutFill, fadeOutStroke和fadeOutText．如果要进行分析，那么我们使用LighteLill，Lightstroke.和廉价的文字．默认情况下填充，中风和文本．

有一个例外:反应和化学计量学课本;文本颜色被忽略，描边被使用。当divellobject.isdisease.是真的，节点边框，边缘边界，边缘文本和段的颜色更改为profile.properties.disease.（通常是红色）。

修饰符

一些元素可以在图中装饰。此信息不在图中，必须从外部插入。反应支持2种类型的装饰：选择和标记．

选择节点时，边框以2种方式更改：颜色更改为profile.properties.selection.宽度增加了。这个节点，它参与的反应以及参与这些反应的节点都带有光环。晕圈是通过在节点后面绘制一个更大的宽度和Profile.properties.halo颜色。

当一个反应被选中时，它的片段、文本和边界的颜色变为profile.properties.selection.并且细分增加了它的宽度。反应及其参与者将晕倒。

当标记节点时，边框在背景中绘制较大宽度profile.properties.flag。此时，边缘没有被标记。

分析

当一个分析被叠加时，我们必须修改元素的颜色更轻的．然后，分析命中的那些节点必须在背景和前台之间呈现新的图层。首先，我们必须计算分析中击中了多少节点。我们可以使用Graph Json文件和分析结果（或分析令牌）来完成它。我们必须通过其子节点从每个节点遍历图表（EntityNode.Children）．

要获得图表图的更详细描述，请展开以下树：

ProcessNodes百分比取自SubpathwaySummary：Entity.Found / Entity.Total。对于分析，还有另一个样式表。我们使用的是使用浓缩analysheet.enrichment.gradient.max.颜色。有3个分析样式表:标准那铜加和StroSobar.．

要获得分析颜色配置文件的更详细描述，请展开以下树：

如果分析是表达式分析，则必须从叶子中获取各个表达值。我们一次只能显示1列。如果我们想向他们展示所有，我们必须创建一个动画（在路径浏览器和图表出口商中的GIF中播放按钮）。一旦我们具有元素的表达式值，我们将其划分为区域并使用analysisheet.Expression.Gridient.要计算每个区域的颜色，使用AnalysisResult.Expression.max.和AnalysisResult.Expression.min.作为限制值。叶子使用分析中的标识符进行排序（FoundEntity.id)．

元素订单

从下到上，元素必须按照以下顺序呈现:

1. 隔间
2. 淡出反应
3. 淡出节点
4. 旗帜
5. 哈索斯
6. 反应
7. 节点
8. 笔记
9. 阴影

更多信息

要了解有关我们的途径图和我们用来有效呈现它们的技术，请通过我们的相关出版物：

1. 反应图查看器:数据结构和策略，以提高性能
2. Reactome增强了路径可视化