igv.js实战教程：加载BAM、VCF和BigWig文件的完整步骤

【免费下载链接】igv.jsEmbeddable genomic visualization component based on the Integrative Genomics Viewer项目地址: https://gitcode.com/gh_mirrors/ig/igv.js

igv.js是一款基于Integrative Genomics Viewer开发的可嵌入基因组可视化组件，能帮助研究人员轻松加载和分析BAM、VCF和BigWig等常见基因组数据文件。本教程将详细介绍使用igv.js加载这些文件的完整步骤，让你快速掌握基因组数据可视化的基本操作。

一、准备工作

在开始使用igv.js加载文件之前，需要先完成以下准备工作：

1. 获取项目代码：通过以下命令克隆igv.js项目仓库

   git clone https://gitcode.com/gh_mirrors/ig/igv.js

2. 了解项目结构：igv.js的核心代码主要存放在js/目录下，其中包含了各种文件格式的解析和处理模块，如BAM文件处理相关的代码在js/bam/目录，VCF文件处理在js/variant/目录，BigWig文件处理在js/bigwig/目录。

二、加载BAM文件

BAM文件是存储基因组比对数据的常用格式，igv.js提供了强大的BAM文件可视化功能。以下是加载BAM文件的步骤：

1. 准备BAM文件及索引：确保你拥有BAM文件和对应的索引文件（.bai或.csi），例如test/data/bam/na12889.bam和test/data/bam/na12889.bam.bai。

2. 创建igv.js实例：在HTML页面中引入igv.js库，然后通过以下代码创建浏览器实例：

   <div id="igvContainer"></div> <script src="dist/igv.min.js"></script> <script> const options = { genome: "hg19", locus: "chr1:1-100000", tracks: [] }; igv.createBrowser(document.getElementById("igvContainer"), options); </script>

3. 添加BAM轨道：使用loadTrack方法添加BAM文件轨道：

   browser.loadTrack({ name: "BAM File", url: "test/data/bam/na12889.bam", indexURL: "test/data/bam/na12889.bam.bai", type: "alignment" });

三、加载VCF文件

VCF文件用于存储遗传变异数据，igv.js可以直观地展示其中的变异信息。加载VCF文件的步骤如下：

1. 准备VCF文件及索引：需要VCF文件和对应的索引文件（.tbi），例如test/data/vcf/test.vcf.gz和test/data/vcf/test.vcf.gz.tbi。

2. 添加VCF轨道：通过loadTrack方法添加VCF轨道：

   browser.loadTrack({ name: "VCF File", url: "test/data/vcf/test.vcf.gz", indexURL: "test/data/vcf/test.vcf.gz.tbi", type: "variant" });

四、加载BigWig文件

BigWig文件常用于存储基因组范围内的定量数据，如测序深度、甲基化水平等。加载BigWig文件的步骤如下：

1. 准备BigWig文件：确保BigWig文件可用，例如test/data/bb/test.bw。

2. 添加BigWig轨道：使用loadTrack方法添加BigWig轨道：

   browser.loadTrack({ name: "BigWig File", url: "test/data/bb/test.bw", type: "wig" });

五、可视化效果展示

成功加载BAM、VCF和BigWig文件后，你将看到类似UCSC Genome Browser的可视化界面，如下所示：

igv.js基因组数据可视化界面

在这个界面中，你可以：

• 缩放和平移基因组区域
• 调整各轨道的显示样式和高度
• 点击查看详细的变异或比对信息
• 导出可视化图像

六、常见问题解决

1. 文件加载失败：检查文件路径是否正确，确保索引文件与数据文件同名且在同一目录下。

2. 可视化性能问题：对于大型BAM文件，可以使用maxRows参数限制显示的行数，提高性能：

   { name: "BAM File", url: "test/data/bam/na12889.bam", indexURL: "test/data/bam/na12889.bam.bai", type: "alignment", maxRows: 100 }

3. 自定义轨道样式：通过color、height等参数自定义轨道的外观，例如：

   { name: "BigWig File", url: "test/data/bb/test.bw", type: "wig", color: "blue", height: 100 }

通过以上步骤，你已经掌握了使用igv.js加载BAM、VCF和BigWig文件的基本方法。igv.js还支持更多高级功能，如自定义基因组、添加交互事件等，你可以通过查阅项目中的示例文件（如examples/igvjs.html）和源代码（如js/trackFactory.js）进一步探索。

【免费下载链接】igv.jsEmbeddable genomic visualization component based on the Integrative Genomics Viewer项目地址: https://gitcode.com/gh_mirrors/ig/igv.js