admin管理员组文章数量:1565292
代码地址如下:
http://www.demodashi/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.84、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);
},
版权声明:本文标题:知识图谱可视化 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1726556455a1075501.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论