引言
在前面的文章《用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图形做后处理,改变字体,颜色,连线形状等》