基于下面项目能够对自己的图谱数据进行可视化展示:
GitHub - molamolaxxx/KGView: 知识图谱可视化javascript库,基于d3.js,面向网页前端知识图谱展示
主要说下遇到的几个问题:
1.节点名称未缩略显示
kg.js中的正则表达式规则存在问题。作者想要实现“如果是全英文,则展示的节点名称不换行显示”,正则表达式为 var re_en = /[a-zA-Z]+/g; 但该规则有悖于作者意图,中英文混合的节点名称也会全部显示,不太美观。改为下面规则即可:var re_en = /[^A-Za-z]+/g;
2.存在游离文本
主要原因是关系文本太长,导致this.getBBox()结果存在问题,bbox的宽和高异常,特别大,且近似于正方形,进而导致旋转180度后远离了原始的连接线,处于游离状态。解决方案:可以对关系也进行缩略显示,修改下面JS片段:
原JS:
//设置线条上的文字路径
edges_text.append('textPath')
.attr('xlink:href', function (d, i) { return '#edgepath' + i })
.style("pointer-events", "none")
.text(function (d) {
return d.rela;
});
修改为:
//设置线条上的文字路径
edges_text.append('textPath')
.attr('xlink:href', function (d, i) { return '#edgepath' + i })
.style("pointer-events", "none")
.text(function (d) {
// 限制文本长度为10个字符,并在末尾添加省略号
return d.rela.length > 10 ? d.rela.substring(0, 10) + "..." : d.rela;
});
3.关系文本未居中
作者仅是在连接线的中间前移了20,不太适用长度差距较大的关系文本。
原JS:
function tick() {//刷新页面函数
...
edges_text.attr('transform', function (d, i) {//连线上的文字
...
})
.attr('dx', function (d, i) {
return Math.sqrt(Math.pow(d.target.x - d.source.x, 2) + Math.pow(d.target.y - d.source.y, 2)) / 2 - 20;
//设置文字一直显示在线的中间
});
}
修改为:
function tick() {//刷新页面函数
...
edges_text.attr('transform', function (d, i) {//连线上的文字
...
})
.attr('dx', function (d, i) {
let bbox = this.getBBox();
return Math.sqrt(Math.pow(d.target.x - d.source.x, 2) + Math.pow(d.target.y - d.source.y, 2)) / 2 - Math.sqrt(Math.pow(bbox.width, 2) + Math.pow(bbox.height, 2)) / 2;
//设置文字一直显示在线的中间
});
}