知识图谱可视化

基于下面项目能够对自己的图谱数据进行可视化展示：

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;
                //设置文字一直显示在线的中间
            });
    }