2

我将如何使用 D3 绘制序列徽标？

来自维基百科

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

一个例子：

在此处输入图像描述

通常，数据以矩阵的形式出现，矩阵的行名是氨基酸/DNA序列，列表示序列的位置。

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

  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

矩阵中的值将对应于字符的相对高度

4

2 回答 2

5

作为灵感，我从堆积条形图开始：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 偏移（堆叠）。

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

于 2013-01-15T22:37:57.677 回答
4

这是解决方案：

这是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 文件中，它会变得更加便携。

（加上氨基酸标志）

于 2013-09-16T18:40:58.963 回答