表达式图集解析图
这是一个解剖图 表达式图集 我们用来说明实验.
此处见演示。 。 。 .
肿瘤的ID来源于 乌伯伦, (中文(简体) ), 埃方 财务报告和审定财务报表 植物 肿瘤。 。 。 .
要安装 :
npm install --save @ebi-gene-expression-group/anatomogram
您可以将其作为反应组件 :
import Anatomogram from '@ebi-gene-expression-group/anatomogram'
...
<Anatomogram .../>
换句话说,如果你不使用React,我们就在提供方便 render 方法 :
import {render} from '@ebi-gene-expression-group/anatomogram'
...
render(options, target)
何处 options 是作为物体传递的道具 target 是 DOM 元素的标识,将包含
解剖图.
例如代码,请查看 演示组件 我们如何使用它 我们的表达式图集热图如果你想看到它在行动,去 atlas中的有机体部分实验 或者说 返回有机体部分实验的搜索。 。 。 .
道具
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| 物种 | 字符串 | - 说吧 | 这是解剖图唯一需要的属性 |
| 显示 | 数组 | [ | |
| 突出显示 | 数组 | [ | |
| 选择索引 | 数组 | [ | |
| 显示颜色 | 字符串 | 灰色 | |
| 突出显示颜色 | 字符串 | 红色 | |
| 选择颜色 | 字符串 | 紫色 | |
| 显示速度 | 编号 | 0.4 (中文(简体) ) | |
| 突出显示速度 | 编号 | 0.4 (中文(简体) ) | |
| 选择速度 | 编号 | 0.4 (中文(简体) ) | |
| 移动 | 函数 | () => {} | 当鼠标被盘旋在组织上时会引用回调 |
| 移动出 | 函数 | () => {} | 当鼠标被从组织上徘徊时,会引用回调 |
| 点击 | 函数 | () => {} | 点击组织时引用回调 |
| 已输入 | 函数 | () => {} | 注入 SVG 时引用回调 |
关于现有物种列表 和ID有查看
src/json/svgsMetadata.json。当软件包发布时,文件会自动生成.
所有三个回调都取了单一的字符串参数,即受鼠标事件影响的组织的ID.
未显示、显示、突出显示或选择组织状态。 打开 mouseover 增加不透明度
0.2. 您可以读取一个技术上更倾向的描述: 存储器
维基百科。 。 。 .
大楼
要使用浏览器中的解剖图, 您需要构建和捆绑软件包:
npm run dist -- --output-public-path='<URL>'
<URL> uRL(绝对或相对),您将从中服务解剖图(例如. /anatomogram/dist/ 页:1
页:1 gh-pages 我们用来构建演示页的分支). 记住要附上最后一刀! 这需要这样
代码知道在哪里寻找静态资产(即SVG和PNG)。 您可以在 网络包装
文档网站。 。 。 .
建造后,部署 anatomogramDemo.bundle.js 是可选的,但前提是您想要托管演示组件.
在 HTML 中包含以下内容:
<script src="<URL>/vendors.bundle.js"></script>
<script src="<URL>/anatomogram.bundle.js"></script>
<script>
anatomogram.render(options, target)
</script>
特定物种的建筑
你可以去掉所有不必要的 SVG和PNG 和改变
Anatomogram.defaultProps.species 对其中任何
支持的物种。 您可以在 页:1 mouse 分支。 。 。 .
贡献
仔细阅读 我们的作者准则 在此之前 在现有解剖图中添加新的组织或更新ID,或添加新的SVG.
运行 npm run parseSvgs 来解析更新的ID。 当您完成演示页的本地副本时 :
npx webpack-dev-server
转到 localhost:9000 并看到组织出现 像你想要的.
许可证
守则按以下方式分发: Apache 许可证版本 2.0。 。 。 . 所有图像、解剖图和切换图标均在 4.0 国际 许可证。 。 。 .