【基因图谱(react 版本)】

基因图谱

描述

react版本 基因图谱

运行

1. npm install
2. npm start

node版本

v16.13.2

接入数据对象格式

name - 字符串 - 曲目的名称和标签

fieldName - 字符串 - 要读取的供体​​/基因对象的字段

type - 字符串 - 轨道数据的类型，OncoGrid 内部不使用，但允许用户对为轨道传入的样式和不透明度函数的行为进行分组。

sort - function - 负责排序的函数

group - 字符串 - 曲目所属组的名称。

collapsed- bool - 如果为 true，并且轨道组在expandableGroups数组中，则默认情况下不会显示轨道

构造函数参数

必需的

element- string selector | dom node- 指示 OncoGrid 实例将使用哪个 DOM 元素。

donors- Array- 代表捐赠者的对象列表。对象唯一需要的字段是id

genes- Array- 代表基因的对象列表。对象唯一需要的字段是id

observations- Array- 表示突变/观察的对象列表。这些对象的必填字段是id, geneId,donorId

可选的

height- number- 设置 OncoGrid 的高度。Default: 500

width- number- 设置 OncoGrid 的宽度。Default: 500

prefix- string- 用于所有 css 类的字符串前缀。Default: 'og-'

donorTracks- Array- 描述要为捐赠者显示的轨道的对象数组。

donorOpacityFunc- function- 描述如何计算供体轨道单元不透明度的函数。

geneTracks- Array- 描述要为基因显示的轨迹的对象数组。

geneOpacityFunc- function- 描述如何计算基因跟踪单元不透明度的函数。

margin- object- 保存边距设置的对象：Default: { top: 30, right: 100, bottom: 15, left: 80 }

heatMap- bool- 如果为 true，初始渲染将处于热图模式。

donorFillFunc- function- 用于确定供体轨道数据的单元格填充颜色的功能。

geneFillFunc- function- 用于确定基因跟踪数据的单元格填充颜色的功能。

colorMap- object- 从结果类型到颜色的映射。

histogramBorderPadding- object- 保存边框和直方图之间空间设置的对象：Default: { bottom: 5, left: 10 }

scaleToFit- bool- 如果为 true，网格将缩放以适合父容器：Default: true

leftTextWidth- number- 为网格左侧文本设置的宽度（应设置为最大文本长度）：Default: 80

expandableGroups- array- 一个字符串数组，用于标识哪些组可以添加和删除曲目。

addTrackFunc- function- 对于expandableGroups数组中的组，添加曲目时将调用此函数。它传递了折叠轨道数组和回调。将添加传递给回调的曲目。

API

render()- 呈现通过params构造函数中的参数配置的实例化 OncoGrid 。

resize(width, height) - 将 oncogrid 调整大小和缩放到新的所需网格宽度和高度。

cluster() - 根据突变计数对基因进行排序，然后对捐赠者重新评分并对其进行处理。

removeDonors(function) - 删除所有对传递的函数评估为真的捐赠者。

removeGenes(function) - 删除对传递的函数评估为真的所有基因。

toggleHeatmap() - 在热图和常规模式之间切换。

setHeatmap(boolean)- 设置热图模式，接受true或false。

toggleGridLines() - 切换定义单元格的网格线

setGridLines(boolean)- 设置网格线，接受true或false。

toggleCrosshair() - 切换十字准线和调整大小模式。

setCrosshair(boolean)- 设置十字准线，接受true或false。

sortDonors(function) - 根据传入的比较器函数对捐赠者进行排序并更新渲染。

sortGenes(function) - 通过提供的比较器对基因进行排序，然后重新评分并重新渲染网格。

destroy() - 调用清除函数以删除网格和观察者。

可用事件

鼠标事件

histogramClick- 在直方图上点击。回调参数{ roated, domain }

histogramMouseOver- 在直方图上鼠标悬停。回调参数{ domain }

histogramMouseOut - 在直方图鼠标上。

gridClick- 在网格上点击。回调参数{ observation }

gridMouseOver- 在网格鼠标上。回调参数{ observation, donor, gene }

gridMouseOut - 在网格鼠标上。

gridCrosshairMouseOver- 在十字准线模式下的网格鼠标上。回调参数{ donor, gene, obs }

gridCrosshairMouseOut - 在十字准线模式下的网格鼠标上。

trackClick- 在轨道点击。回调参数{ domain, type }

trackMouseOver- 在轨道上鼠标悬停。回调参数{ domain, type }

trackMouseOut - 在轨道鼠标了。

trackLegendMouseOver- 在轨道传奇鼠标悬停。回调参数{ group }

trackLegendMouseOut - 在轨道传奇鼠标了。

addTrackClick- 在添加轨道点击。回调参数{ hiddenTracks, addTrack }

计时事件

render:mainGrid:start

render:mainGrid:end

render:donorHisogram:start

render:donorHisogram:end

render:donorTrack:start

render:donorTrack:end

render:geneHistogram:start

render:geneHistogram:end

render:geneTrack:start

render:geneTrack:end

render:all:start

render:all:end

乐享-基因图谱
原文地址：gitee 地址