在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偏移量（堆叠）。

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

Answer 2

以下是解决方案：

这是cmonkey实现的一个分支： http://jsfiddle.net/fgborja/rMArY/

我使用Inkspace对字符进行了一些调整。 'sequencelogo'字体作为字形嵌入在javascript中。

   function sequencelogoFont(){
      var font = svg.append("defs").append("font")
                                       .attr("id","sequencelogo")
      //...
      font.append("glyph")
        .attr("unicode","A") 
        .attr("vert-adv-y","50") 
        .attr("d","M500 767l-120 -409h240zM345 948h310l345 -1000h-253l-79 247h-338l-77 -247h-253l345 1000v0z")      
      //...
    }

如果将svg字体转换为ttf，woff和eot并将它们作为源文件放在css文件中，它就会变得更加便携。

（加上氨基酸标识）