# @bighatbio/msa 中文文档

规范地址：https://npmcn.com/package/%40bighatbio/msa/

版本：1\.0\.6
npm 元数据更新时间：2022-04-04T18:46:18.391Z
中文译文更新时间：2026-11-08T02:03:15.847Z
软件包许可：BSL-1\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40bighatbio/msa
原文对照：https://npmcn.com/package/%40bighatbio/msa/?lang=original
项目主页：http://github.com/BigHat-Biosciences/msa
源码仓库：https://github.com/BigHat-Biosciences/msa

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：3.1 MB，89 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：18 个
- 首次发布：2021-10-18T15:46:41.094Z
- 最新版本发布：2021-10-18T20:41:23.255Z
- 近 30 天下载量：19107（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 0 个）

## 中文简介

显示多个序列

## 安装

```sh
npm install @bighatbio/msa
```

也可以使用：`pnpm add @bighatbio/msa`、`yarn add @bighatbio/msa`、`bun add @bighatbio/msa`

## README

# MSA维耶尔

多序列对齐查看器 - MSAViewer - 一个BioJS组件.

```
          .         .
         ,8.       ,8.            d888888o.           .8.
        ,888.     ,888.         .`8888:' `88.        .888.
       .`8888.   .`8888.        8.`8888.   Y8       :88888.
      ,8.`8888. ,8.`8888.       `8.`8888.          . `88888.
     ,8'8.`8888,8^8.`8888.       `8.`8888.        .8. `88888.
    ,8' `8.`8888' `8.`8888.       `8.`8888.      .8`8. `88888.
   ,8'   `8.`88'   `8.`8888.       `8.`8888.    .8' `8. `88888.
  ,8'     `8.`'     `8.`8888.  8b   `8.`8888.  .8'   `8. `88888.
 ,8'       `8        `8.`8888. `8b.  ;8.`8888 .888888888. `88888.
,8'         `         `8.`8888. `Y8888P ,88P'.8'       `8. `88888.
```

[![Build Status](https://travis-ci.org/wilzbach/msa.svg?branch=master)](https://travis-ci.org/wilzbach/msa) [![NPM version](http://img.shields.io/npm/v/msa.svg)](https://www.npmjs.org/package/msa) [![Join the chat at https://gitter.im/wilzbach/msa](https://badges.gitter.im/wilzbach/msa.svg)](https://gitter.im/wilzbach/msa?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![Dependencies](https://david-dm.org/wilzbach/msa.png)](https://david-dm.org/wilzbach/msa) [![Code Climate](https://codeclimate.com/github/wilzbach/msa/badges/gpa.svg)](https://codeclimate.com/github/wilzbach/msa) [![NPM downloads](http://img.shields.io/npm/dm/msa.svg)](https://www.npmjs.org/package/msa)

```html
<script src=//cdn.bio.sh/msa/1.0/msa.min.gz.js></script>
```

是的,你可以链接到精密的,gzipped CDN版本,也可以从S3下载dev版本.

[![Min version](http://img.shields.io/badge/prod-35kB-blue.svg)](https://cdn.bio.sh/msa/latest/msa.min.gz.js) [![Dev version](http://img.shields.io/badge/dev-latest-yellow.svg)](https://cdn.bio.sh/msa/latest/msa.js)

[![NPM](https://nodei.co/npm/msa.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/msa/)

## 用这个

[全屏幕](http://msa.biojs.net/app) 模式.

## 演示

这些例子表明,你如何将MSAViewer嵌入你的页面.

[![JSBin clustal](http://img.shields.io/badge/jsbin-clustal-blue.svg)](http://jsbin.com/quvex/4/edit?js,output) [![JSBin large](http://img.shields.io/badge/jsbin-large-blue.svg)](http://jsbin.com/zunuko/4/edit?html,js,output)

[目前狙击手](http://workmen.biojs.net/demo/msa) 有不同实例

#### 显示管理事务协议

![basic MSA](https://i.imgur.com/nQtfMmI.png)

#### 特征

-   纯在浏览器中运行
-   以 FASTA, Clustal 等格式导入文件...
-   互动和接收 [活动](https://github.com/wilzbach/msa/wiki/Events)
-   过滤器, 排序, 隐藏序列
-   显示序列 [特性](https://github.com/wilzbach/biojs-vis-easy_features/)
-   可扩展 [视图](https://github.com/wilzbach/msa/wiki/Views) 帮助您融入社会
-   可自定义的视图端口
-   作为设计规则的简单
-   导出为 fASTAb
-   生成相环
-   再来点...

## 使用 MSA 服务器

**以下例子假定: `msa()` 构造器可用 .**

如果您已经装入 `msa` 作为你的网页上的脚本 和类似的东西...

```
<script src="//cdn.bio.sh/msa/latest/msa.min.gz.js"></script>
```

...然后祝贺! 你准备好了.

使用时 `npm` 并且正在添加msa作为依赖,然后您可以使用以下方法:

```
var msa = require("msa");
```

### 导入

#### (a) 直接导入url

```js
var opts = {
  el: rootDiv,
  importURL: "./data/fer1.clustal",
};
var m = msa(opts);
```

\- > (中文) [JSBin 实例](http://jsbin.com/yusifufiwa/1/edit?js,output)

### (b) 从字符串中导入自己的序列

```js
// your fasta file (advice: save it in a DOM node)
var fasta = ">seq1\n\
ACTG\n\
>seq2\n\
ACGG\n";

// parsed array of the sequences
var seqs =  msa.io.fasta.parse(fasta);

var m = msa({
     el: rootDiv,
     seqs: seqs
});
m.render();
```

\- > (中文) [JSBin 示例](http://jsbin.com/zutaqofuro/1/edit?html,js,output)

#### c) 同步导入

```js
var m = msa({
    el: rootDiv,
});
msa.io.clustal.read("https://raw.githubusercontent.com/wilzbach/msa/master/test/dummy/samples/p53.clustalo.clustal", function(err, seqs){
    m.seqs.reset(seqs);
    m.render();
});
```

\- > (中文) [JSBin 实例](http://jsbin.com/zesihapede/1/edit)

### 从 DOM 导入您的序列

```js
var fasta = document.getElementById("fasta-file").innerText;
var seqs = msa.io.fasta.parse(fasta);

var m = msa({
    el: rootDiv,
    seqs: seqs
});
m.render();
```

以下数据存储在您的 HTML 页面中:

```html
<pre style="display: none" id="fasta-file">
>seq1
ACTG
>seq2
ACGG</pre>
```

\- > (中文) [JSBin 示例](http://jsbin.com/megecapene/1/edit?html,js,output)

### 基本配置参数

-   `bootstrapMenu`: 自动显示菜单
-   `el`: 根 DOM 元素
-   `importURL`: 当您想要自动导入文件时
-   `seqs`: 如果您喜欢通过序列作为对象

还有其他许多备选办法,归入这些类别。 详情见下文.

-   `column`: 隐藏列
-   `colorscheme`: 颜色图案的一切
-   `conf`: 基本配置
-   `vis`:视觉元素
-   `visorder`: 命令视觉元素
-   `zoomer`: 所有以像素为基础的

## 获得帮助

请打开一个 [问题](https://github.com/wilzbach/msa/issues/new) 或打我们 [减肥](https://gitter.im/wilzbach/msa)

### 正在采取行动的MSAViewer

-   [瓦波尔语Name](http://vapor.biojs.tgac.ac.uk/)
-   [乍得](http://www.cathdb.info/) - 说吧 [实例](http://cathdb.info/version/v4_1_0/superfamily/3.40.50.620/funfam/89168/alignment)
-   [基调3D](http://gene3d.biochem.ucl.ac.uk/) - 说吧 [纸张](http://nar.oxfordjournals.org/content/early/2015/11/16/nar.gkv1231.full#F1), (中文(简体) ), [实例](http://gene3d.biochem.ucl.ac.uk/model?smd5=408c333701ec7e889d495aeb32d7ae10;regs=81_147;fam=2.30.30.40.FF19354;mregs=81_147;cath_mod=na)
-   [微调](https://github.com/bene200/msaR) - 将管理事务协议视同交互式R图或闪亮的部件
-   [MPI 用于蛋白质序列分析的生物信息学工具包](http://toolkit.tuebingen.mpg.de/sections/alignment)
-   [保利马克](http://www.ncbi.nlm.nih.gov/pubmed/25649618)
-   [银河可视化插件](http://www.benjamenwhite.com/2015/07/biojs2galaxy-a-step-by-step-guide)
-   [苦行](http://bitterdb.agri.huji.ac.il/bitterdbtest/dbbitter.php#ReceptorAlignment)
-   [{\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}我爱她 _Java 脚本和生物信息学_ 教程](https://github.com/thejmazz/js-bioinformatics-exercise)
-   [哲学技术中心](https://cpt.tamu.edu/clustalw-msa-and-visualisations)
-   [PHYLOViZ 在线](https://online.phyloviz.net/)
-   [平通DB 2.0](https://www.ncbi.nlm.nih.gov/projects/HistoneDB2.0/index.fcgi/browse/)

你在用MSAViewer吗? 不要异化做公关,让我们知道!

### 更改颜色方案

检查这个 [现场实例](http://workmen.biojs.net/demo/msa/colorscheme) 或者说 [编辑](http://workmen.biojs.net/jsbin/msa/colorscheme)。 。 。 .

```
var opts = {
  el: rootDiv,
  importURL: "./data/fer1.clustal",
  colorscheme: {"scheme": "hydro"}
};
var m = msa(opts);
```

拥有颜色方案

```
var opts = {
  el: rootDiv,
  importURL: "./data/fer1.clustal",
  colorscheme: {"scheme": "hydro"}
};
var m = msa(opts);
m.g.colorscheme.addStaticScheme("own",{A: "orange", C: "red", G: "green", T: "blue"});
m.g.colorscheme.set("scheme", "own");
```

看看这个 [医生](https://github.com/wilzbach/msa-colorschemes) 需要更多信息.

### 添加特性

检查这个 [现场实例](http://workmen.biojs.net/demo/msa/fer1_annoted) 或者说 [编辑](http://workmen.biojs.net/jsbin/msa/fer1_annoted)。 。 。 .

```
var xhr = require("xhr");
var gffParser = require("biojs-io-gff");
var m = msa({el: rootDiv, importURL: "https://raw.githubusercontent.com/wilzbach/msa/master/test/dummy/samples/p53.clustalo.clustal");

// add features
xhr("./data/fer1.gff3", function(err, request, body) {
  var features = gffParser.parseSeqs(body);
  m.seqs.addFeatures(features);
});

// or even more
xhr("./data/fer1.gff_jalview", function(err, request, body) {
  var features = gffParser.parseSeqs(body);
  m.seqs.addFeatures(features);
});
```

### 更新如下

```
m.seqs.at(0).set("hidden", true) // hides the first seq
m.seqs.at(0).get("seq") // get raw seq
m.seqs.at(0).get("seqId") // get seqid
m.seqs.at(0).set("seq", "AAAA") // sets seq
m.seqs.add({seq: "AAA"});  // we add a new seq at the end
m.seqs.unshift({seq: "AAA"});  // we add a new seq at the beginning
m.seqs.pop() // remove and return last seq
m.seqs.shift() // remove and return first seq
m.seqs.length // nr
m.seqs.pluck("seqId") // ["id1", "id2", ..]
m.seqs.remove(m.seqs.at(2)) // remove seq2
m.seqs.getMaxLength() // 200
m.seqs.addFeatures()
m.seqs.removeAllFeatures()
m.seqs.setRef(m.seqs.at(1)) // sets the second seq as reference (default: first)
m.seqs.comparator = "seqId" // sort after seqId
m.seqs.sort() // apply our new comparator
m.seqs.comparator =  function(a,b){ return - a.get("seq").localeCompare(b.get("seq"))} // sort after the seq itself in descending order
m.seqs.sort()
```

连 [更多](http://backbonejs.org/#Collection) 这是可能的.

### 更新选择

```
m.g.selcol.add(new msa.selection.rowsel({seqId: "f1"})); // row-based
m.g.selcol.add(new msa.selection.columnsel({xStart: 10, xEnd: 12})); // column-wise
m.g.selcol.add(new msa.selection.possel({xStart: 10, xEnd: 12, seqId: "f1"})); // union of row and column
m.g.selcol.reset([new msa.selection.rowsel({seqId: "f1"})]); // reset
```

```
m.g.selcol.getBlocksForRow() // array of all selected residues for a row
m.g.selcol.getAllColumnBlocks() // array with all selected columns
m.g.selcol.invertRow(@model.pluck "id")
m.g.selcol.invertCol([0,1,2])
m.g.selcol.reset() // remove the entire selection
m.g.user.set("searchText", search) // search
```

### 跳转到一列

```
m.g.zoomer.setLeftOffset(10) // jumps to column 10
```

### 导出并保存

```
m.utils.export.saveAsFile(m, "all.fasta") // export seqs
m.utils.export.saveSelection(m, "selection.fasta")
m.utils.export.saveAnnots(m, "features.gff3")
m.utils.export.saveAsImg(m,"biojs-msa.png")

// share the seqs with the public = get a public link
m.utils.export.shareLink(m, function(link){
    window.open(link, '_blank')
})

// share via jalview
var url =  m.g.config.get('url')
if url.indexOf("localhost") || url === "dragimport"
    m.utils.export.publishWeb(m, function(link){
        m.utils.export.openInJalview(link, m.g.colorscheme.get("scheme"))
    });
}else{
    m.utils.export.openInJalview(url, m.g.colorscheme.get("scheme"))
}
```

### 更新属性

```
msa.g.vis.set("marker", false); // hides the markers
msa.g.zoomer.set("alignmentHeight", 500) // modifies the default height
```

### 听属性事件

所有班级

```
m.g.selcol.on("change", function(prev, new){

})
```

您也可以聆听更具体的事件

```
m.g.vis.on("change:alignmentWidth", function(prev, new){

})
```

### 倾听用户交互

```
msa.g.on("residue:click", function(data){ ... }):
msa.g.on("residue:mousein", function(data){ ... }):
msa.g.on("residue:mouseout", function(data){ ... }):
```

如果您想听鼠标事件, 您需要设置旗: `conf.registerMouseHover`。 。 。 . 还有很多事情你可以听

```
msa.g.on("row:click", function(data){ ... }):
msa.g.on("column:click", function(data){ ... }):
msa.g.on("meta:click", function(data){ ... }):
...
```

### G 的配置参数

```
conf: {
    registerMouseHover: false,
    registerMouseClicks: true,
    importProxy: "https://cors-anywhere.herokuapp.com/",
    eventBus: true,
    alphabetSize: 20,
    dropImport: false,
    debug: false,
    hasRef: false // hasReference,
    manualRendering: false // manually control the render (not recommened)
},
colorscheme: {
    scheme: "taylor", // name of your color scheme
    colorBackground: true, // otherwise only the text will be colored
    showLowerCase: true, // used to hide and show lowercase chars in the overviewbox
    opacity: 0.6 //opacity for the residues
},
columns: {
    hidden: [] // hidden columns
}
vis: {
    sequences: true,
    markers: true,
    metacell: false,
    conserv: false,
    overviewbox: false,
    seqlogo: false,
    gapHeader: false,
    leftHeader: true,

    // about the labels
    labels: true,
    labelName: true,
    labelId: true,
    labelPartition: false,
    labelCheckbox: false,

    // meta stuff
    metaGaps: true,
    metaIdentity: true,
    metaLinks: true
},
zoomer: {
    // general
    alignmentWidth: "auto",
    alignmentHeight: 225,
    columnWidth: 15,
    rowHeight: 15,
    autoResize: true, // only for the width

    // labels
    textVisible: true,
    labelIdLength: 30,
    labelNameLength: 100,
    labelPartLength: 15,
    labelCheckLength: 15,
    labelFontsize: 13,
    labelLineHeight: "13px",

    // marker
    markerFontsize: "10px",
    stepSize: 1,
    markerStepSize: 2,
    markerHeight: 20,

    // canvas
    residueFont: "13", //in px
    canvasEventScale: 1,

    // overview box
    boxRectHeight: 2,
    boxRectWidth: 2,
    overviewboxPaddingTop: 10,

    // meta cell
    metaGapWidth: 35,
    metaIdentWidth: 40,
    metaLinksWidth: 25
}
```

菜单有它自己的小组属性,可以被修改. 这是 `menu` 属性.

```
menu: {
    menuFontsize: "14px",
    menuItemFontsize: "14px",
    menuItemLineHeight: "14px",
    menuMarginLeft: "3px",
    menuPadding: "3px 4px 3px 4px",
}
```

### 序列模型

```
{
  name: "",
  id: "",
  seq: "",
  height: 1,
  ref: false // reference: the sequence used in BLAST or the consensus seq
}
```

## 财务问题

问:我如何定义自己的颜色方案?

↝ [在 JSBin 播放游戏](http://workmen.biojs.net/jsbin/msa/colorscheme) ↝ [读取文档](https://github.com/wilzbach/msa-colorschemes)

## 准则

-   [儿童状况](http://en.wikipedia.org/wiki/KISS_principle) - > 避免混淆
-   保持模块化
-   避免锅炉-板码
-   避免超过两个参数用于公共方法 - > 接受字典更灵活
-   每个文件最多200行(- > 更好的组织)

## 第1步 设置

```bash
git clone https://github.com/wilzbach/msa
cd msa
npm install
```

-   **无**: 你需要一个 `npm` 此软件包管理器( 和节点) . 在大多数发行版上,有一个软件包,看 [这里](https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager)

## 步骤2:发展

在根目录中执行 :

```
./w
```

你可以浏览片段 [本地主机: 9090/ 片段](http://localhost:9090/snippets)。 。 。 .

## 为浏览器编译

对多数情况来说,使用我们的CDN建筑是最佳办法. 如果你需要修改 管理事务协议,你可以得到一个微调捆绑 文件夹 `dist` 改为:

```
gulp build
```

## 软件包列表

↝ [软件包列表](https://github.com/wilzbach/msa/wiki/Package-list)

## 项目结构

-   `browser.js` 浏览器主文件 - 定义浏览器中的全局命名空间
-   `css` 样式表文件夹( 以前用于 SASS)
-   `gulpfile.js` 任务定义文件(用于 [ulp](http://gulpjs.com/%5D)
-   `package.json` [npm 配置](https://www.npmjs.org/doc/files/package.json.html)
-   `examples` 运行的短编码片段 [`sniper`](https://github.com/biojs/sniper)
-   `src` 主源代码

## 想多学点吗?

继续 [维基百科](https://github.com/wilzbach/msa/wiki)。 。 。 .

## 参与

随便选一个公开的话题 [问题跟踪器](https://github.com/wilzbach/msa/issues) 并且帮助让MSAViewer更好.

得到你的特性请求的最好方式是 给我们发送一个拉出请求. 不要担心简单的执行,我们将帮助你使它更好.

问更多问题,我们查问题追踪器或 [减肥](https://gitter.im/wilzbach/msa)。 。 。 .

## 团队

没有这些人的帮助 MSAViewer计划是不可能实现的:

塞巴斯蒂安·威尔斯巴赫(慕尼黑技术大学;TUM),伊恩·西利托(伦敦大学学院),贝内迪克特·劳斯赫(TUM),罗伯特·谢里丹(哈佛医学院),詹姆斯·普罗克特(邓德大学),苏珊娜·刘易斯(Berkeley),布尔哈尔德·罗斯特(TUM),塔季亚纳·戈德伯格(TUM)和盖伊·亚克达夫(TUM).

你想加入团队吗? 只要抓住一个问题 并给我们一个公关! 问我们 [减肥](https://gitter.im/wilzbach/msa) 如果你需要帮助才能开始.

## 版本 & CDN

以下发布新的管理事务协议版本 [语义版本](http://semver.org/)。 。 。 . 从1.0.3起算 [标记](https://github.com/wilzbach/msa/tags) 匹配 npm 和 CDN 上部署的版本 . 在CDN上,我们提供了四个不同的版本:

```
https://cdn.bio.sh/msa/1.0.3/msa.min.gz.js // static, won't change
https://cdn.bio.sh/msa/1.0/msa.min.gz.js // will be updated until a new minor version is released
https://cdn.bio.sh/msa/1/msa.min.gz.js // will be updated until a new major version is released
https://cdn.bio.sh/msa/latest/msa.min.gz.js // will be updated on every commit
```

如果你在生产时使用MSAViewer,我们建议将CDN版本锁定到精确的发布和不时更新.

## 许可证

本项目根据以下规定获得许可证: [启动软件许可证 1.0](https://github.com/wilzbach/msa/blob/master/LICENSE)。 。 。 .

> 特此免费准许任何人或任何组织 获取软件副本和所附文件 使用、复制、展示、分发、, 执行和传送软件,并编写 软件,并允许向 这样做,但须符合下列条件:

如果你在你的网站上使用MSAViewer,它只需要你链接到我们.

## 引用MSAViewer号

MSAViewer已经出版:tada:

请引用 [本文](http://bioinformatics.oxfordjournals.org/content/early/2016/07/12/bioinformatics.btw474.abstract)当您在您的项目中使用 MSAViewer.

> 盖伊·雅克达夫和塞巴斯蒂安·威尔斯巴赫,贝内迪克特·劳斯彻和罗伯特·谢里丹,伊恩·西利托和詹姆斯·普罗克特和苏珊娜·刘易斯,布尔克哈德·罗斯特和塔特亚纳·戈德伯格. "MSAViewer:交互式JavaScript可视化多序列对接". Bioinformics (2016)

作为 Bibtex :

```
@Article{msaviewer,
   Author = {Guy Yachdav and Sebastian Wilzbach and Benedikt Rauscher and Robert Sheridan and Ian Sillitoe and James Procter and Suzanna Lewis and Burkhard Rost and Tatyana Goldberg},
   Title="{{M}{S}{A}{V}iewer: interactive {J}ava{S}cript visualization of multiple sequence alignments}",
   Journal="Bioinformatics",
   Year="2016",
   Pages=" ",
   Month="Jul",
   Doi = {10.1093/bioinformatics/btw474},
   Url = {http://dx.doi.org/10.1093/bioinformatics/btw474}
}
```

## 常见问题

### @bighatbio/msa 是什么？

显示多个序列

### 如何安装 @bighatbio/msa？

在项目目录运行 npm install @bighatbio/msa，或使用 pnpm add / yarn add / bun add。

### @bighatbio/msa 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/bighatbio\_\_msa 是否存在。

### @bighatbio/msa 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @bighatbio/msa 可以商用吗？

@bighatbio/msa 使用 BSL-1\.0 许可。声明的许可为 BSL-1\.0，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。

### @bighatbio/msa 的下载量有多少？

根据 npm 官方下载统计，@bighatbio/msa 在 2026/10/08 – 2026/11/06 这 30 天内被下载 19,107 次，日均约 637 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bighatbio/msa 还在维护吗？

最新版本 1\.0\.6 发布于 2021/10/19（5 年前）；至今共发布 3 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/10/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。