知识图谱可视化

代码地址如下：
http://www.demodashi.com/demo/13181.html

人物关系知识图谱

一、背景

将结构化数据通过关系预处理程序处理为图数据库可以查询的数据，示例是将其中一部分（人物关系数据）可视化表示。

二、用到的技术

技术点：图数据库Neo4j，d3.js，java，css，spring boot
开发工具：IDEA专业版（可找学生账号注册免费使用一年，社区版不支持WEB开发）

三、项目结构以及代码实现过程

实现思路这样：
1，先定义基础的展示页面index.html
2、完成画图js(graph.js)
3，提供一个基础的拿数据接口加载测试绘图数据和绘图需要的数据（例如节点选中之后的小图标加载）
4、页面从数据接口请求数据之后，调用绘图JS在页面完成画图操作（请求数据的接口可以很方便的改为从图数据库拿取数据进行展示）

主要文件目录说明：

1、data目录
bg.jpg可视化背景图片数据
CircularPartition.json节点圆形分区图工具栏需要加载的数据
test.json可视化需要展示的数据格式

2、images
此目录存储节点属性图片数据

3、js
d3.js version-3.2.8

4、src
JS以及其它HTML等源码

5、index.html
知识图谱可视化入口文件

6、拿数据接口
通过数据Type id加载圆形分区图数据和测试知识图谱构图数据（type等于1加载圆形分区数据，type是等于2加载测试知识图谱展示数据）
GET:http://localhost:7476/knowledge-graph/hello/dataSource/type/{id}

做图过程（graph.js）：

// 定义画布 （radius是鼠标点击生成圆形分区图的半径）
var width = 1345, height = 750, color = d3.scale.category20();
var svg = d3.select("body")
    .append("svg")
    .attr("id", "svgGraph")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("id", "svgOne")
    .call(d3.behavior.zoom() // 自动创建事件侦听器
        .scaleExtent([0.1, 10]) // 缩放允许的级数
        .on("zoom", zoom)
    )
    .on("dblclick.zoom", null); // remove双击缩放

// 实时获取SVG画布坐标
function printPosition() {
   
    var position = d3.mouse(svg.node());
    return position;
}

// 缩放函数
function zoom() {
    // translate变换矢量（使用二元组标识）scale当前尺度的数字
    svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); // 画布缩放与移动
    // svg.attr("transform", "scale(" + d3.event.scale + ")"); // 画布缩放
}

// 设置连线箭头属性
function setMarkers() {
    svg.append("g")
        .attr("id", "lineAndText")
        .selectAll("marker")
        .data(edges)
        .enter()
        .append("marker")
        .attr("id", function (d) {
            return d.id;
        })
        .attr("viewBox", "0 -5 10 10") // 坐标系的区域
        .attr("class", "arrow")
        .attr("refX", 27) // refX,refY在viewBox内的基准点，绘制时此点在直线端点上（要注意大小写）
        .attr("refY", 0)
        .attr("markerWidth", 10) // 标识的大小
        .attr("markerHeight", 18) // 标识的大小
        .attr("markerUnits", "userSpaceOnUse") // 标识大小的基准，有两个值：strokeWidth（线的宽度）和userSpaceOnUse（图形最前端的大小）
        .attr("orient", "auto") // 绘制方向，可设定为：auto（自动确认方向）和 角度值
        .append("path")
        .attr("d", "M0,-5L10,0L0,5")
        .attr("fill", "#ccc");
}

// 添加连线
function add_edges() {
   
    setMarkers(); // 设置连线箭头属性
    var svg_edges = svg.select("#lineAndText")
        .selectAll("line")
        .data(edges)
        .enter()
        .append("line")
        .attr("id", function (d) {
   
            return d.id;
        })
        .style("stroke", "#ccc")
        .style("stroke_width", 1)
        .attr("marker-end", function (d) {
   
            return "url(#" + d.id + ")";
        })
        .attr("stroke", "#999")
        .on("mouseover", function (d) { // 鼠标选中时触发
            mouseSelectLine(d);
            addToolTip(d); //添加提示框的div
        })
        .on("mouseout", function () {
   
            d3.select("#relation").remove();
            d3.select("#tooltip").remove();
        });
    return svg_edges;
}

// 求直线与圆的交点
// 函数参数说明:cx:圆X轴坐标 cy:圆y轴坐标  r:圆半径 stx:起点直线的X轴坐标 sty:起点直线的轴坐标 edx:终点直线的X轴坐标 edy:终点直线的Y轴坐标
// 返回值:交点坐标(x,y)
function getPoint(cx, cy, r, stx, sty, edx, edy) {
   
    // 求直线
    var k = (edy - sty) / (edx - stx);
    var b = edy - k * edx;
    //列方程
    var x1, y1, x2, y2;
    var c = cx * cx + (b - cy) * (b - cy) - r * r;
    var a = (1 + k * k);
    var b1 = (2 * cx - 2 * k * (b - cy));

    var tmp = Math.sqrt(b1 * b1 - 4 * a * c);
    x1 = (b1 + tmp) / (2 * a);
    y1 = k * x1 + b;
    x2 = (b1 - tmp) / (2 * a);
    y2 = k * x2 + b;

    // 过滤距离最近的坐标
    var p = {};

    function lineIf(lx, ly, lxx, lyy) {
   
        var d = Math.sqrt((lx - lxx) * (lx - lxx) + (ly - lyy) * (ly - lyy));
        return d;
    }

    if (cx != stx) { // stx, sty
        var d1 = lineIf(x1, y1, stx, sty);
        var d2 = lineIf(x2, y2, stx, sty);
        if (d1 < d2) {
            p.x = x1;
            p.y = y1;
        } else {
            p.x = x2;
            p.y = y2;
        }
    } else { // edx, edy
        var d1 = lineIf(x1, y1, edx, edy);
        var d2 = lineIf(x2, y2, edx, edy);
        if (d1 < d2) {
            p.x = x1;
            p.y = y1;
        } else {
            p.x = x2;
            p.y = y2;
        }
    }
    return p;
}

// 鼠标选中关系添加显示效果
function mouseSelectLine(d) {
   
    var p1 = getPoint(d.source.x, d.source.y, 20, d.source.x, d.source.y, d.target.x, d.target.y);
    var p2 = getPoint(d.target.x, d.target.y, 20, d.source.x, d.source.y, d.target.x, d.target.y);
    var json = [p1, p2];
    //构造默认线性生成器
    var line = d3.svg.line()
        .x(function (d) {
    //指定x存取器为：取每个数据元素的x属性的值
            return d.x;
        })
        .y(function (d) {
    //指定y存取器为：取每个数据元素的y属性的值
            return d.y;
        });
    svg.append('path')
        .attr({
            "d": function () {
    //生成路径数据
                return line(json);
            },