D3中的绘图顺序徽标 [英] Drawing sequence logos in D3

问题描述

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

How would I go about drawing a sequence logo with D3?

来自维基百科

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

a sequence logo is a graphical representation of the sequence conservation of nucleotides (in a strand of DNA/RNA) or amino acids (in protein sequences). A sequence logo consists of a stack of letters at each position. The relative sizes of the letters indicates their frequency in the sequences. The total height of the letters depicts the information content of the position, in bits.

示例：

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

Typically, data comes in the form of a matrix such that the row names of the matrix is the amino acids/DNA sequence and the columns denote the position of the sequence.

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

So if I had a character space of A B C and sequences of length 4 the matrix would look something like this

  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

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

The values in the matrix would correspond to the relative height of the character

推荐答案

解决方法如下：

这是 cmonkey 实施：
http://jsfiddle.net/fgborja/rMArY/

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

I made some adjustments in the characters using the Inkspace. The 'sequencelogo' font is embedded as glyphs in 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文件中，它将变得更加可移植。

It becomes more portable if you convert the svg font to ttf, woff and eot and put them as source in the css file.

（加上氨基酸徽标）

这篇关于D3中的绘图顺序徽标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！