D3中的绘图顺序徽标

问题描述

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

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

来自维基百科

示例：

通常，数据以矩阵的形式出现，使得矩阵的行名是氨基酸/ 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

推荐答案

解决方法如下：

这是

我使用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中的绘图顺序徽标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！