用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圖形做後處理，改變字型，顔色，連線形狀等》