javascript+SVG画饼图

javascript+SVG画饼图

将26个英文字母分成6组，运用javascript+SVG画出一个英文单词中各组中含有字母的饼图，具体要求如下图，分不是问题，请各位大哥帮忙，最好有注解。

createPieChart = function(document)
{
\x09var NewSVGElement = function(Q,A)//生成SVG元素
\x09{
\x09\x09var F;
\x09\x09Q = 'string' === typeof Q ? document.createElementNS('http' + '://www.w3.org/2000/svg',Q) : Q
\x09\x09for (F in A) F.indexOf('xlink:') ?
\x09\x09\x09Q.setAttribute(F,A[F]) ://不是xlink命名空间的属性
\x09\x09\x09Q.setAttributeNS('http' + '://www.w3.org/1999/xlink',F.substr(6),A[F])//是xlink命名空间的属性
\x09\x09return Q
\x09},Group = {},T = ['ABCD','EFGH','IJKL','MNOP','QRSTU','VWXYZ'],F;
\x09for (F = T.length;F--;)//向Group中初始化bins的数据
\x09\x09for (;T[F];T[F] = T[F].substr(1))
\x09\x09\x09Group[T[F].charAt(0)] = F
\x09return function(SVG,Q)
\x09{
\x09\x09var\x09Count = Array(6),//存放bins计数
\x09\x09\x09G,//
\x09\x09\x09Radius = SVG.getAttribute('height') / 2,//存放半径
\x09\x09\x09Length,//存放字符长度
\x09\x09\x09R = 0,//存储当前角度
\x09\x09\x09S = Math.sin,
\x09\x09\x09C = Math.cos,//单纯的做个本地副本, 益处是角度计算多的时候方便
\x09\x09\x09X,Y,//坐标计算缓存, 用於提高效能
\x09\x09\x09F;//临时变量|计数器变量
\x09\x09Q = Q.toUpperCase().split('')//转化成大写後单字分隔
\x09\x09Length = Q.length
\x09\x09for (;Q.length;Q.shift())//bins计数
\x09\x09{
\x09\x09\x09F = Group[Q[0]]
\x09\x09\x09Count[F] = (Count[F] || 0) + 1
\x09\x09}
\x09\x09SVG.appendChild(G = NewSVGElement('g',
\x09\x09{
\x09\x09\x09transform : 'translate(' + Radius + ' ' + Radius + ')',//通过坐标变换将绘制设置为原点在 !画布中心! , 向右为x增, 向下为y增
\x09\x09\x09style : 'fill:gray;stroke:black'//默认填充样式
\x09\x09}))
\x09\x09X = Radius
\x09\x09Y = 0
\x09\x09for (F = 0;F < Count.length;++F)
\x09\x09{
\x09\x09\x09Count[F] && (R += 2 * Math.PI * Count[F] / Length)//模拟旋转
\x09\x09\x09G.appendChild(NewSVGElement('path',
\x09\x09\x09{
\x09\x09\x09\x09d : 'M0 0 ' + X + ' ' + Y + 'A' + Radius + ' ' + Radius + ' 0 0 1 ' + (X = Radius * C(R)) + ' ' + (Y = Radius * S(R))
\x09\x09\x09\x09//A指令的用法一句两句说不清楚, 还是看文档吧
\x09\x09\x09}))
\x09\x09}
\x09\x09return SVG
\x09}
}(document)