知識圖譜可視化

http://www.demodashi.com/demo/13181.html

 

技術：Neo4j+d3.js+java+css+spring boot

運行環境：d3.js_3.2.8+java_8+spring boot_2.0.0 

概述

將結構化數據通過關系預處理程序處理為圖數據庫可以查詢的數據，示例是將其中一部分（人物關系數據）可視化表示。使用前請先使用idea中maven install打包工程，然后使用啟動腳本啟動即可。強烈建議使用IDEA開發~

詳細

人物關系知識圖譜

一、背景

將結構化數據通過關系預處理程序處理為圖數據庫可以查詢的數據，示例是將其中一部分（人物關系數據）可視化表示。

二、用到的技術

技術點：圖數據庫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）：

1. // 定義畫布 （radius是鼠標點擊生成圓形分區圖的半徑）
2. var width = 1345, height = 750, color = d3.scale.category20();
3. var svg = d3.select("body")
4. .append("svg")
5. .attr("id", "svgGraph")
6. .attr("width", width)
7. .attr("height", height)
8. .append("g")
9. .attr("id", "svgOne")
10. .call(d3.behavior.zoom() // 自動創建事件偵聽器
11. .scaleExtent([0.1, 10]) // 縮放允許的級數
12. .on("zoom", zoom)
13. )
14. .on("dblclick.zoom", null); // remove雙擊縮放

1. // 實時獲取SVG畫布坐標
2. function printPosition() {
3. var position = d3.mouse(svg.node());
4. return position;
5. }

1. // 縮放函數
2. function zoom() {
3. // translate變換矢量（使用二元組標識）scale當前尺度的數字
4. svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); // 畫布縮放與移動
5. // svg.attr("transform", "scale(" + d3.event.scale + ")"); // 畫布縮放
6. }

1. // 設置連線箭頭屬性
2. function setMarkers() {
3. svg.append("g")
4. .attr("id", "lineAndText")
5. .selectAll("marker")
6. .data(edges)
7. .enter()
8. .append("marker")
9. .attr("id", function (d) {
10. return d.id;
11. })
12. .attr("viewBox", "0 -5 10 10") // 坐標系的區域
13. .attr("class", "arrow")
14. .attr("refX", 27) // refX,refY在viewBox內的基准點，繪制時此點在直線端點上（要注意大小寫）
15. .attr("refY", 0)
16. .attr("markerWidth", 10) // 標識的大小
17. .attr("markerHeight", 18) // 標識的大小
18. .attr("markerUnits", "userSpaceOnUse") // 標識大小的基准，有兩個值：strokeWidth（線的寬度）和userSpaceOnUse（圖形最前端的大小）
19. .attr("orient", "auto") // 繪制方向，可設定為：auto（自動確認方向）和 角度值
20. .append("path")
21. .attr("d", "M0,-5L10,0L0,5")
22. .attr("fill", "#ccc");
23. }

1. // 添加連線
2. function add_edges() {
3. setMarkers(); // 設置連線箭頭屬性
4. var svg_edges = svg.select("#lineAndText")
5. .selectAll("line")
6. .data(edges)
7. .enter()
8. .append("line")
9. .attr("id", function (d) {
10. return d.id;
11. })
12. .style("stroke", "#ccc")
13. .style("stroke_width", 1)
14. .attr("marker-end", function (d) {
15. return "url(#" + d.id + ")";
16. })
17. .attr("stroke", "#999")
18. .on("mouseover", function (d) { // 鼠標選中時觸發
19. mouseSelectLine(d);
20. addToolTip(d); //添加提示框的div
21. })
22. .on("mouseout", function () {
23. d3.select("#relation").remove();
24. d3.select("#tooltip").remove();
25. });
26. return svg_edges;
27. }

1. // 求直線與圓的交點
2. // 函數參數說明:cx:圓X軸坐標 cy:圓y軸坐標 r:圓半徑 stx:起點直線的X軸坐標 sty:起點直線的軸坐標 edx:終點直線的X軸坐標 edy:終點直線的Y軸坐標
3. // 返回值:交點坐標(x,y)
4. function getPoint(cx, cy, r, stx, sty, edx, edy) {
5. // 求直線
6. var k = (edy - sty) / (edx - stx);
7. var b = edy - k * edx;
8. //列方程
9. var x1, y1, x2, y2;
10. var c = cx * cx + (b - cy) * (b - cy) - r * r;
11. var a = (1 + k * k);
12. var b1 = (2 * cx - 2 * k * (b - cy));
14. var tmp = Math.sqrt(b1 * b1 - 4 * a * c);
15. x1 = (b1 + tmp) / (2 * a);
16. y1 = k * x1 + b;
17. x2 = (b1 - tmp) / (2 * a);
18. y2 = k * x2 + b;
20. // 過濾距離最近的坐標
21. var p = {};
23. function lineIf(lx, ly, lxx, lyy) {
24. var d = Math.sqrt((lx - lxx) * (lx - lxx) + (ly - lyy) * (ly - lyy));
25. return d;
26. }
28. if (cx != stx) { // stx, sty
29. var d1 = lineIf(x1, y1, stx, sty);
30. var d2 = lineIf(x2, y2, stx, sty);
31. if (d1 < d2) {
32. p.x = x1;
33. p.y = y1;
34. } else {
35. p.x = x2;
36. p.y = y2;
37. }
38. } else { // edx, edy
39. var d1 = lineIf(x1, y1, edx, edy);
40. var d2 = lineIf(x2, y2, edx, edy);
41. if (d1 < d2) {
42. p.x = x1;
43. p.y = y1;
44. } else {
45. p.x = x2;
46. p.y = y2;
47. }
48. }
49. return p;
50. }

1. // 鼠標選中關系添加顯示效果
2. function mouseSelectLine(d) {
3. var p1 = getPoint(d.source.x, d.source.y, 20, d.source.x, d.source.y, d.target.x, d.target.y);
4. var p2 = getPoint(d.target.x, d.target.y, 20, d.source.x, d.source.y, d.target.x, d.target.y);
5. var json = [p1, p2];
6. //構造默認線性生成器
7. var line = d3.svg.line()
8. .x(function (d) { //指定x存取器為：取每個數據元素的x屬性的值
9. return d.x;
10. })
11. .y(function (d) { //指定y存取器為：取每個數據元素的y屬性的值
12. return d.y;
13. });
14. svg.append('path')
15. .attr({
16. "d": function () { //生成路徑數據
17. return line(json);
18. },
19. "id": "relation"
20. })
21. .style({
22. "stroke": "#87CEFA", //path顏色
23. "stroke-width": 6 //path粗細
24. });
25. }

1. // 添加節點
2. function add_nodes() {
3. var svg_nodes = svg.append("g")
4. .attr("id", "circleAndText")
5. .selectAll("circle")
6. .data(nodes)
7. .enter()
8. .append("g")
9. .call(force.drag().on("dragstart", function (d) {
10. d3.select("#eee").remove(); // 刪除節點扇形
11. d3.select("#sel").remove(); // 刪除節點選中
12. d3.event.sourceEvent.stopPropagation(); // 畫布拖動與節點拖動分離
13. d3.select(this).attr("r", 20 * 2);
14. })
15. .on("dragend", function (d) {
16. d3.select("#eee").remove(); // 刪除節點扇形
17. d3.select("#sel").remove(); // 刪除節點選中
18. d.fixed = true; // 拖動結束后節點固定
19. d3.select(this).attr("r", 20);
20. })
21. )
22. .on("click", function (d) { // 鼠標點擊時觸發
23. // 在當前節點處畫三頁扇形
24. d3.select("#eee").remove();
25. drawCirclePartition(d);
26. })
27. .on("mouseover", function (d) { // 光標放在某元素上s
28. mouseSelect(d); // 鼠標選中效果
29. addToolTip(d); //添加提示框的div
30. })
31. .on("mouseout", function (d) {
32. d3.select("#sel").remove(); // 刪除節點選中
33. d3.select("#tooltip").remove();
34. d3.select("#tooltipCir").remove();
35. });
36. svg_nodes.append("circle")
37. .attr("id", function (d) {
38. return d.index;
39. })
40. .attr("r", 20)
41. .attr("fill", function (d, i) {
42. return color(i);
43. });
44. svg_nodes.append("image")
45. .attr("class", "circle")
46. .attr("xlink:href", function (d) {
47. var img = d.image;
48. if (img != undefined) {
49. return "http://222.216.195.154:7476/knowledge-graph/path/images/" + d.image
50. } else {
51. return null;
52. }
53. })
54. .attr("x", "-20px")
55. .attr("y", "-20px")
56. .attr("width", "40px")
57. .attr("height", "40px");
58. svg_nodes.append("svg:text")
59. .style("fill", "#ccc")
60. .attr("dx", 20)
61. .attr("dy", 8)
62. .text(function (d) {
63. return d.name
64. });
65. return svg_nodes;
66. }

1. //添加提示框的div
2. function addToolTip(d) {
3. var htmlStr;
4. if (d.source && d.target && d.type) {
5. htmlStr = "name:" + d.type + "<br/>";
6. } else {
7. htmlStr = "id:" + d.id + "<br/>" + "name:" + d.name + "<br/>";
8. }
9. var position = printPosition(d);
10. var tooltip = d3.select("body").append("div")
11. .attr("class", "tooltip") //用於css設置類樣式
12. .attr("opacity", 0.0)
13. .attr("id", "tooltip");
14. htmlStr = htmlStr + "locx:" + position[0] + "<br/>" + "locy:" + position[1] + "<br/>";
15. if (d.image != undefined) {
16. htmlStr = htmlStr + "<img src=\"http://222.216.195.154:7476/knowledge-graph/path/images/" + d.image + "\" height=\"100\" width=\"100\" />";
17. }
18. tooltip.html(htmlStr)
19. .style("left", (d3.event.pageX) + "px")
20. .style("top", (d3.event.pageY + 20) + "px")
21. .style("opacity", 0.75);
22. }
23. function addToolTipCir(d) {
24. var htmlStr;
25. if (d.name == "☿") {
26. htmlStr = "notes:解鎖當前節點<br/>";
27. }
28. if (d.name == "✂") {
29. htmlStr = "notes:裁剪當前節點與關系<br/>";
30. }
31. if (d.name == "✠") {
32. htmlStr = "notes:拓展當前節點與關系<br/>";
33. }
34. if (d.name == "◎") {
35. htmlStr = "notes:釋放所有鎖定的節點<br/>";
36. }
37. if (d.name == "오") {
38. htmlStr = "notes:鎖定所有節點<br/>";
39. }
40. var tooltip = d3.select("body").append("div")
41. .attr("class", "tooltip") //用於css設置類樣式
42. .attr("opacity", 0.0)
43. .attr("id", "tooltipCir");
44. tooltip.html(htmlStr)
45. .style("left", (d3.event.pageX) + "px")
46. .style("top", (d3.event.pageY + 20) + "px")
47. .style("opacity", 0.75);
48. }

1. // 生成圓弧需要的角度數據
2. var arcDataTemp = [{startAngle: 0, endAngle: 2 * Math.PI}];
3. var arc_temp = d3.svg.arc().outerRadius(26).innerRadius(20);

1. // 鼠標選中節點添加顯示效果
2. var svg_selectNode;
4. function mouseSelect(d) {
5. svg_selectNode = svg.append("g")
6. .attr("id", "sel")
7. .attr("transform", "translate(" + d.x + "," + d.y + ")")
8. .selectAll("path.arc")
9. .data(arcDataTemp)
10. .enter()
11. .append("path")
12. .attr("fill", "#87CEFA")
13. .attr("d", function (d, i) {
14. return arc_temp(d, i);
15. });
16. }

1. // 全局停止力作用之間的影響
2. function stopForce() {
3. for (var i = 0; i < nodes.length; i++) {
4. var obj = nodes[i];
5. obj.fixed = true;
6. }
7. }

1. // 全局開始力作用之間的影響
2. function startForce() {
3. for (var i = 0; i < nodes.length; i++) {
4. var obj = nodes[i];
5. obj.fixed = false;
6. }
7. force.resume();
8. }

1. var nodesMark = [], edgesMark = [], indexNodeMark = []; // 緩存中所有已加載的數據標記
2. // 節點添加圓形分區（添加三頁扇形）
3. function drawCirclePartition(d) {
4. // 圓形分區布局（數據轉換）
5. var radius = 40;
6. var partition = d3.layout.partition()
7. .sort(null)
8. .size([2 * Math.PI, radius * radius]) // 第一個值域時2 PI，第二個值時圓半徑的平方
9. .value(function (d) {
10. return 1;
11. });
13. // 繪制圓形分區圖
14. // 如果以圓形的形式來轉換數據那么d.x和d.y分別代表圓弧的繞圓心
15. // 方向的起始位置和由圓心向外的起始位置d.dx和d.dy分別代表各自的寬度
16. var arc = d3.svg.arc()
17. .startAngle(function (d) {
18. return d.x;
19. })
20. .endAngle(function (d) {
21. return d.x + d.dx;
22. })
23. .innerRadius(function (d) {
24. return 26;
25. })
26. .outerRadius(function (d) {
27. return 80;
28. });
29. var circlePart = partition.nodes(dataCirclePartition);
31. // "☿" 釋放固定的節點
32. function releaseNode() {
33. d.fixed = false;
34. // force.start(); // 開啟或恢復結點間的位置影響
35. force.resume();
36. }
38. // "✂" 刪除當前節點以及當前節點到其它節點之間的關系
39. function removeNode() {
40. var newNodes = [];
41. for (var i = 0; i < nodes.length; i++) {
42. var obj = nodes[i];
43. if (obj.id != d.id) {
44. newNodes.push(obj);
45. }
46. }
47. var newedges = [];
48. for (var i = 0; i < edges.length; i++) {
49. var obj = edges[i];
50. if ((d.index != obj.source.index) && (d.index != obj.target.index)) {
51. newedges.push(obj);
52. }
53. }
54. nodes = newNodes;
55. edges = newedges;
57. var nIndex = function (d) {
58. return d.index;
59. };
60. var lIndex = function (d) {
61. return d.id;
62. };
63. // 通過添加'g'元素分組刪除
64. svg.select("#circleAndText").selectAll("circle")
65. .data(nodes, nIndex)
66. .exit()
67. .remove();
68. svg.select("#circleAndText").selectAll("image")
69. .data(nodes, nIndex)
70. .exit()
71. .remove();
72. svg.select("#circleAndText").selectAll("text")
73. .data(nodes, nIndex)
74. .exit()
75. .remove();
76. svg.select("#lineAndText").selectAll("line")
77. .data(edges, lIndex)
78. .exit()
79. .remove();
80. svg.select("#lineAndText").selectAll("text")
81. .data(edges, lIndex)
82. .exit()
83. .remove();
84. }

1. // 擴展當前節點，距離為1
2. // 1.從rawData(rawNodes/rawEdges)中找出當前節點需要擴展的節點與關系數據
3. // 2.拿出需要擴展的數據到node/edges中去除已經綁定圖形元素的數據
4. // 3.將過濾出的未綁定圖形元素需要擴展的數據重新調用構圖方法進行構圖
5. // 添加從服務器實時加載數據的功能：基本思想與1~3類似
6. function extendNode() {
7. var index = d.index;
8. var arrEdges = [], arrIndex = [], arrNodes = [];
9. for (var i = 0; i < rawEdges.length; i++) {
10. if ((index == rawEdges[i].source.index) || (index == rawEdges[i].target.index)) {
11. arrEdges.push(rawEdges[i]);
12. if (index != rawEdges[i].source.index) {
13. arrIndex.push(rawEdges[i].source.index);
14. } else if (index != rawEdges[i].target.index) {
15. arrIndex.push(rawEdges[i].target.index);
16. }
17. }
18. edgesMark.push(rawEdges[i].id);
19. }
20. for (var i = 0; i < rawNodes.length; i++) {
21. for (var j = 0; j < arrIndex.length; j++) {
22. var obj = arrIndex[j];
23. if (rawNodes[i].index == obj) {
24. arrNodes.push(rawNodes[i]);
25. }
26. }
27. nodesMark.push(rawNodes[i].id);
28. indexNodeMark.push(rawNodes[i].index);
29. }
30. // nodes.push(arrNodes);
31. // edges.push(arrEdges);
32. var nodesRemoveIndex = [];
33. for (var i = 0; i < arrNodes.length; i++) {
34. var obj = arrNodes[i];
35. for (var j = 0; j < nodes.length; j++) {
36. var obj2 = nodes[j];
37. if (obj.index == obj2.index) {
38. nodesRemoveIndex.push(i);
39. }
40. }
41. }
42. var edgesRemoveIndex = [];
43. for (var i = 0; i < arrEdges.length; i++) {
44. var obj = arrEdges[i];
45. for (var j = 0; j < edges.length; j++) {
46. var obj2 = edges[j];
47. if (obj.id == obj2.id) {
48. edgesRemoveIndex.push(obj.id);
49. }
50. }
51. }
52. var coverNodes = [];
53. for (var i = 0; i < arrNodes.length; i++) {
54. var obj = arrNodes[i];
55. if (!isInArray(nodesRemoveIndex, i)) {
56. nodes.push(obj);
57. coverNodes.push(obj);
58. }
59. }
60. var coverEdges = [];
61. for (var i = 0; i < arrEdges.length; i++) {
62. var obj = arrEdges[i];
63. if (!isInArray(edgesRemoveIndex, obj.id)) {
64. edges.push(obj);
65. coverEdges.push(obj);
66. }
67. }
68. // console.log("找出需要擴展的數據");
69. // console.log(arrEdges);
70. // console.log(arrNodes);
72. // console.log("添加到原始需要綁定圖形元素的數據集集合/與rawNodes,rawEdges服務器加載的原始數據保持區分");
73. // console.log(nodes);
74. // console.log(edges);
76. // 添加從服務器請求擴展數據
77. // var url = "http://222.216.195.154:7476/knowledge-graph/hello/dataSource/node/extend/" + d.id + "";
78. // d3.json(url, function (error, json) { // 服務器加載知識圖譜數據
79. // if (error) {
80. // return console.warn(error);
81. // }
82. // console.log("從服務器請求的擴展數據：");
83. // var serverNodes = json.nodes;
84. // var serverEdges = json.links;
85. // console.log(serverNodes);
86. // console.log(serverEdges);
87. // console.log(nodesMark);
88. // console.log(edgesMark);
89. // // 重新設置INDEX
90. // var maxIndex = Math.max.apply(null, indexNodeMark);
91. // console.log("MAX:" + maxIndex);
92. //
93. // for (var i = 0; i < serverNodes.length; i++) {
94. // if (!isInArray(nodesMark, serverNodes[i].id)) {
95. // serverNodes[i].index = maxIndex + 1
96. // maxIndex = maxIndex + 1;
97. // nodes.concat(serverNodes[i]);
98. // console.log(serverNodes[i]);
99. // }
100. // }
101. // for (var i = 0; i < serverEdges.length; i++) {
102. // if (!isInArray(edgesMark, serverEdges[i].id)) {
103. // edges.concat(serverEdges);
104. // console.log(serverEdges[i]);
105. // }
106. // }
107. // console.log("服務器加載並且合並之后的數據：");
108. // console.log(nodes);
109. // console.log(edges);
110. // d3.select("#svgGraph").select("#svgOne").selectAll("*").remove(); // 清空SVG中的內容
111. // buildGraph();
112. // });
114. d3.select("#svgGraph").select("#svgOne").selectAll("*").remove(); // 清空SVG中的內容
115. buildGraph();
116. }
118. var arcs = svg.append("g")
119. .attr("id", "eee")
120. .attr("transform", "translate(" + d.x + "," + d.y + ")")
121. .selectAll("g")
122. .data(circlePart)
123. .enter()
124. .append("g")
125. .on("click", function (d) { // 圓形分區綁定Click事件
126. if (d.name == "☿") {
127. releaseNode();
128. }
129. if (d.name == "✂") {
130. removeNode();
131. }
132. if (d.name == "✠") {
133. extendNode();
134. }
135. if (d.name == "◎") {
136. startForce();
137. }
138. if (d.name == "오") {
139. stopForce();
140. }
141. d3.select("#eee").remove();
142. d3.select("#tooltipCir").remove();
143. });
144. arcs.append("path")
145. .attr("display", function (d) {
146. return d.depth ? null : "none"; // hide inner ring
147. })
148. .attr("d", arc)
149. .style("stroke", "#fff")
150. .style("fill", "#A9A9A9")
151. .on("mouseover", function (d) {
152. d3.select(this).style("fill", "#747680");
153. addToolTipCir(d); //添加提示框的div
154. })
155. .on("mouseout", function () {
156. d3.select("#tooltipCir").remove();
157. d3.select(this).transition()
158. .duration(200)
159. .style("fill", "#ccc")
160. var array = printPosition();
161. var distance = Math.sqrt(Math.pow((d.x - array[0]), 2) + Math.pow((d.y - array[1]), 2));
162. if (distance > 80) {
163. d3.select("#eee").remove(); // 刪除節點扇形
164. }
165. });
166. arcs.append("text")
167. .style("font-size", "16px")
168. .style("font-family", "simsun")
169. .style("fill", "white")
170. .attr("text-anchor", "middle")
171. .attr("transform", function (d, i) {
172. // 平移和旋轉
173. var r = 0;
174. if ((d.x + d.dx / 2) / Math.PI * 180 < 180) // 0-180度以內的
175. r = 180 * ((d.x + d.dx / 2 - Math.PI / 2) / Math.PI);
176. else // 180-360度
177. r = 180 * ((d.x + d.dx / 2 + Math.PI / 2) / Math.PI);
178. return "translate(" + arc.centroid(d) + ")" + "rotate(" + r + ")";
179. })
180. .text(function (d) {
181. return d.name;
182. });
183. return arcs;
184. }

1. // 添加描述關系文字
2. function add_text_edges() {
3. var svg_text_edges = svg.select("#lineAndText")
4. .selectAll("line.text")
5. .data(edges)
6. .enter()
7. .append("text")
8. .attr("id", function (d) {
9. return d.id;
10. })
11. .style("fill", "#ccc")
12. .attr("x", function (d) {
13. return (d.source.x + d.target.x) / 2
14. })
15. .attr("y", function (d) {
16. return (d.source.y + d.target.y) / 2
17. })
18. .text(function (d) {
19. return d.type;
20. })
21. .on("mouseover", function (d) { // 鼠標選中時觸發
22. mouseSelectLine(d);
23. addToolTip(d); //添加提示框的div
24. })
25. .on("mouseout", function () {
26. d3.select("#relation").remove();
27. d3.select("#tooltip").remove();
28. })
29. .on("click", function () {
31. });
32. return svg_text_edges;
33. }

1. // 對於每一個時間間隔進行更新
2. function refresh() {
3. force.on("tick", function () { // 對於每一個時間間隔
4. // 更新連線坐標·
5. svg_edges.attr("x1", function (d) {
6. return d.source.x;
7. })
8. .attr("y1", function (d) {
9. return d.source.y;
10. })
11. .attr("x2", function (d) {
12. return d.target.x;
13. })
14. .attr("y2", function (d) {
15. return d.target.y;
16. });
17. // 更新節點以及文字坐標
18. svg_nodes.attr("transform", function (d) {
19. return "translate(" + d.x + "," + d.y + ")";
20. });
21. // 更新關系文字坐標
22. svg_text_edges.attr("x", function (d) {
23. return (d.source.x + d.target.x) / 2
24. })
25. .attr("y", function (d) {
26. return (d.source.y + d.target.y) / 2
27. });
28. });
29. }

1. var force, nodes = [], edges = [], rawNodes, rawEdges, mapNodes = new Map(); // 構建知識圖譜需要操作的數據 (rawNodes, rawEdges將加載的原始構圖數據緩存一份)
2. // 知識圖譜可視化構建
3. function graph(data) {
5. // 先清空布局中的圖形元素
6. // d3.select("#svgGraph").select("#svgOne").selectAll("*").remove();
7. // var serverD = data.nodes;
8. // var serverE = data.links;
10. // 去除NODES中重復的節點，如果有節點重復即將EDGES中的數據重新設置source值和target值
11. // serverD,serverE,nodes,edges
13. // var filterServerD = [];
14. // for (var i = 0; i < serverD.length; i++) {
15. // if (!isInArray(nodesIndexId, serverD[i].id)) {
16. // filterServerD.push(serverD[i]);
17. // }
18. // }
19. // 去重之后重新調整filterServerD的NODE index值
21. // mapNodes.forEach(function (value, key) {
22. // console.log(value);
23. // console.log(key);
24. // if (isInArray(nodesIndexId,key)){
25. //
26. // }
27. // });
28. // recordNodesIndex(serverD);
29. // console.log(nodesIndexValue);
31. // 多數組連接
32. // nodes = nodes.concat(data.nodes);
33. // edges = edges.concat(data.links);
34. // console.log(nodes);
35. // console.log(edges);
36. // rawNodes = nodes;
37. // rawEdges = edges;
38. // // 定義力布局（數據轉換）
39. // force = d3.layout.force()
40. // .nodes(nodes) // 指定節點數組
41. // .links(edges) // 指定連線數組
42. // .size([width, height]) // 指定范圍
43. // .linkDistance(150) // 指定連線長度
44. // // .gravity(0.02) // 設置引力避免躍出布局
45. // .friction(0.9) // 設置摩擦力速度衰減
46. // .charge(-400); // 相互之間的作用力
47. // force.start(); // 開始作用
48. // buildGraph();
49. }

1. var svg_edges, svg_nodes, svg_text_edges; // 需要動態更新的函數(dynamic update function)
2. // Strat build Knowledge Graph/Vault
4. function buildGraph() {
5. console.log("開始構建可視化知識圖譜：");
6. console.log(nodes);
7. console.log(edges);
8. svg_edges = add_edges(); // 添加連線與箭頭
9. svg_nodes = add_nodes(); // 添加節點與文字
10. svg_text_edges = add_text_edges(); // 添加描述關系的文字
11. refresh(); // 對於每一個時間間隔進行更新
12. force.resume(); // 必須添加否則圖形元素更新不及時
13. }

1. // 服務器加載數據
2. var dataCirclePartition;
4. function load() {
5. d3.json("http://222.216.195.154:7476/knowledge-graph/hello/dataSource/type/1", function (error, root) { // 服務器加載節點圓形分區數據
6. if (error) {
7. return console.warn(error);
8. }
9. dataCirclePartition = root;
10. });
11. d3.json("http://222.216.195.154:7476/knowledge-graph/hello/dataSource/type/2", function (error, json) { // 服務器加載知識圖譜數據
12. if (error) {
13. return console.warn(error);
14. }
15. console.log("初始加載：");
16. console.log(json.nodes);
17. console.log(json.links);
18. graph(json);
19. });
20. // d3.json("http://222.216.195.154:7476/knowledge-graph/hello/dataSource/node/extend/99817", function (error, json) { // 服務器加載知識圖譜數據
21. // if (error) {
22. // return console.warn(error);
23. // }
24. // console.log("初始加載：");
25. // console.log(json);
26. // graph(json);
27. // });
28. }
30. // 初始化圖數據庫配置信息
31. startNeo4j();
33. // 執行知識圖譜數據可視化
34. load();
36. // 傳入NODE ID與NODE INDEX,節點的INDEX與構圖時數據加載的順序密切相關
37. function loadById(id, maxNodeIndex, nodesIdList) {
38. // var para = ["id:" + id, "maxNodeIndex:" + maxNodeIndex, "nodesIdList:" + nodesIdList];
39. var para = {"id": id, "maxNodeIndex": maxNodeIndex, "nodesIdList": nodesIdList};
40. console.log(para);
41. d3.json("http://222.216.195.154:7476/knowledge-graph/hello/dataSource/node/idIndex/" + para, function (error, data) { // 服務器加載知識圖譜數據
42. if (error) {
43. return console.warn(error);
44. }
45. console.log("動態ID加載的數據：");
46. console.log(nodesMark);
47. console.log(edgesMark);
48. console.log(nodes);
49. console.log(edges);
50. console.log(data);
51. graph(data);
52. });
53. }
55. function loadZdrSearch(json) {
56. d3.json("http://222.216.195.154:7476/knowledge-graph/hello/dataSource/type/1", function (error, root) { // 服務器加載節點圓形分區數據
57. if (error) {
58. return console.warn(error);
59. }
60. dataCirclePartition = root;
61. });
63. graph(json);
65. }
67. // 執行知識圖譜數據可視化
68. // loadById(id);

啟動入口類KnowledgeGraphApplication之后，
調用接口：http://localhost:7476/knowledge-graph/hello/index
此接口調用控制類加載index.html，HTML中調用了js文件加載展示數據，詳細的實現過程請看完整的代碼注釋。

代碼目錄結構說明一:

代碼目錄結構說明二:

四、可視化效果（所有可視化效果均帶有力布局效果）

1.節點與關系均帶有選中效果，節點關系裁剪與擴展

☿ 解鎖當前節點
✂ 剪切當前節點於關系
✠ 擴展當前節點與關系
오 固定所有節點
◎ 解鎖所有節點

實體擴展功能:

節點效果:

2.完整示例

完整效果顯示示例一：

完整效果顯示示例二：