用jquery对graphviz生成的svg图形做后处理（续篇一)在SVG文本中显示上标或下标

引言

在前面的文章《用jquery对graphviz生成的svg图形做后处理，改变字体，颜色，连线形状等》说明了如何对graphviz生成的svg内容做后处理。

这次碰到了一个新的需求，要对graphviz生成的B+树的图形中的某些内容显示上标。

举例如下：

原来的的B+树图形如下：

现在想让右孩子上重复的两个33 ，只显示一个33,但是又要用上标表示这里出现了两个33。

最后实现的效果如下：

工作原理

还是要用jquery对graphviz生成的svg进行后处理。但是不能直接使用html中的

<sup><sup>
           

标签进行控制。

在svg的文本块中进行上标控制的语法示例如下：

<tspan style="baseline-shift:super;">2</tspan>
           

将要显示为上标的内容用tspan标签包裹起来，加上属性baseline-shift:super。属性baseline-shift:sub表示显示为下标。需要注意的是，字体并没有自动变小，还要主动设置字体大小和颜色才行。完整的标签内容如下

<tspan style="baseline-shift:super;font-size:8;fill:red">2</tspan>
           

相关的javascript函数

//生成显示上标的文本
function makeSupTag(oldStr){
    var newStr=''    
    var arr = oldStr.split(/'/);
    for(var i=0;i<arr.length;i++){
        p = arr[i].indexOf('^');
        //console.log(p);
        if(p>=0){
            newStr+=arr[i].substr(0,p)+'<tspan style="baseline-shift:super;font-size:8;fill:red">'+arr[i].substr(p+1)+'</tspan>';
        }else{
            newStr+=arr[i];
        }
    }   
    return newStr;
}
           

完整的后处理代码

postHandle.html

<script type="text/javascript"  src ="jquery.min.js"></script>

<script type="text/javascript">

//对dot生成的svg文件进行后处理
$(function(){

//将所有的顶点间的连线从曲线变成直线
$.each($('.edge').find('path'), function(i,val){  
	$path =  $(val);   
    //$path.attr('stroke','red');
    var oldStr = $path.attr('d');
    var newStr = curve2line(oldStr);
    $path.attr('d',newStr);

  });  

//将所有的顶点中以#开始的文本的颜色和字号与普通文本进行区分，
//如果有上标提示，则显示上标
$.each($('.node').find('text'), function(i,val){  
    $text =  $(val);  
    if($text.text().substr(0,1)=='#'){
        //console.log($text.text());
        $text.attr('fill','blue');
        var oldSize = $text.attr('font-size');
        //缩小字号
        var newSize = decFontSize(oldSize,2);
        $text.attr('font-size',newSize);
    }else{
        var oldStr = $text.text();
        $text.html(makeSupTag(oldStr));
    }
  });     


}); 

//将曲线指令转换成直线指令
function curve2line(oldStr){
	//console.log(oldStr);
	var arr = oldStr.split(/C| /);
	newStr = arr[0]+'L'+arr[arr.length-1];
	//console.log(newStr);
	return newStr;
}

//缩放字号
function decFontSize(oldSize,n){
	var tmp = oldSize - n;
	if(tmp > 0){
		return tmp;
	}
	return oldSize;
}

//生成显示上标的文本
function makeSupTag(oldStr){
    var newStr=''    
    var arr = oldStr.split(/'/);
    for(var i=0;i<arr.length;i++){
        p = arr[i].indexOf('^');
        //console.log(p);
        if(p>=0){
            newStr+=arr[i].substr(0,p)+'<tspan style="baseline-shift:super;font-size:8;fill:red">'+arr[i].substr(p+1)+'</tspan>';
        }else{
            newStr+=arr[i];
        }
    }   
    return newStr;
}

</script>
           

后处理的完整过程，还是参考前面的文章《用jquery对graphviz生成的svg图形做后处理，改变字体，颜色，连线形状等》