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

以下是解决办法：

这是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文件中，它将变得更加可移植。

(加上氨基酸标志)

Answer 2

作为灵感，我从堆叠的条形图开始：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-偏移量(堆叠).

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