在D3中绘制序列标识

Question

我如何用D3绘制序列标识？

来自维基百科

一个序列标识是核苷酸的序列保守性的图示(在DNA/RNA的一条链),或氨基酸(蛋白质序列).序列标识由每个位置的一堆字母组成.字母的相对大小表示它们在序列中的频率.字母的总高度以位为单位描述位置的信息内容.

一个例子:

通常,数据以矩阵的形式出现,使得矩阵的行名称是氨基酸/ DNA序列,并且列表示序列的位置.

因此,如果我有一个字符空间A B C和长度为4的序列,矩阵将看起来像这样

  1     2     3     4
A 0.1   0.8   0.2   0.1
B 0.3   0.2   0.3   0.05
C 0     0.1   0.4   0.4

矩阵中的值将对应于角色的相对高度

Answer 1

作为灵感,我开始使用堆积条形图:http: //bl.ocks.org/3886208

粗略的实现在这里:http: //jsfiddle.net/QcPZ9/

其中一个比较混乱的部分是:

data.forEach(function(d) {
    var y0 = 0;
    d.bits = d.map( function( entry ) { 

        return { bits: entry.bits, letter: entry.letter, y0: y0, y1 : y0 += +entry.bits };          
    } )
    d.bitTotal = d.bits[d.bits.length - 1].y1; 
});

基本上,它表示计算每个序列条目的总位数(最终是一列).它还保持先前的位,以便可以计算y偏移(堆叠).

总的来说,这可以通过使用字母的定义符号或图形而不是字体黑客来改进.