文档作者：Armor
资料参考：http://www.openkg.cn/dataset/2020

简介

构造知识图谱是一个复杂的系统工程。其构造和实现方法并不唯一，尚未存在固定的范式。
在算法上不考虑知识图谱的实体抽取、关系抽取、知识消融和嵌入算法。
在数据上不考虑非结构化数据，仅通过百度百科爬取半结构化的数据进行数据源获取。
所以本Demo是假设在已具备数据质量优良的前提下，把数据从Neo4j或其他的图数据库中释放出来，进行web端的可视化展示，并据此开发一些基本功能或下游任务。
参考openKG的开源项目，进行一定程度的修改和适配。
目的有二：

  • 一是作为CQUSTKG的小型的知识图谱展示Demo
  • 二是提供一个简单的知识图谱可视化开发流程

1.数据获取和清洗


  • 从政府公开信息获得 全国普通高等学校名单 文件获取点我
  • 截至2020年6月30日，全国高等学校共计3005所，其中：普通高等学校2740所，含本科院校1258所、高职（专科）院校1482所；


1.1 清洗高校名单数据

  • 在清洗之前，先打开excel文件删除头两行，再用python代码进行清洗 ```python import numpy as np import pandas as pd

用pandas 打开

df = pd.read_excel(“全国高等学校名单.xls”)

先把备注中所有的Nan全部替换为公办

df[“备注”].fillna(“公办”,inplace=True)

删除含Nan的空行

df.dropna(axis=0,inplace=True)

学校表示码转换数据类型 成int64

df[“学校标识码”] = df[“学校标识码”].astype(np.int64)

保存文件

df.to_csv(“School_List_2020.csv”,index=False)

看看长啥样

print(df.shape) df.head()

  1. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/2655886/1617184909988-0531a5e6-fccb-47a7-8896-0924ae11a03b.png#align=left&display=inline&height=194&margin=%5Bobject%20Object%5D&name=image.png&originHeight=194&originWidth=529&size=15471&status=done&style=shadow&width=529)<br />🚀OK！得到一个干净的csv文件，接下来进行爬虫。
  3. <a name="E6mWb"></a>
  4. ## 1.2 爬虫获取json数据
  6. 可以看到高校的百度百科的构成是 `https://baike.baidu.com/item/` + `"高校名称"` <br />所以爬虫遍历的urls链接可以用上面的csv文件来构造:
  7. ```python
  8. df = pd.read_csv("School_List_2020.csv")
  9. urls = []
  10. for i in df["学校名称"]:
  11.     url = "https://baike.baidu.com/item/" + str(i)
  12.     urls.append(url)

image.png

报错缺什么自己pip ，爬虫完整代码:

  1. import requests
  2. import json
  3. import time
  4. from tqdm import tqdm
  5. import numpy as np
  6. import pandas as pd
  7. from bs4 import BeautifulSoup
  9. # 计时
  10. def run_time(start_time):
  11.     current_time = time.strftime("%Y-%m-%d %H:%M:%S",time.localtime())
  12.     print(f"当前时间:{current_time}")
  13.     print("耗时:%.3f sec" %(time.time()-start_time))
  15. # get url 并获取网页内容
  16. def url_open(url):
  17.     headers = {'User-Agent':'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36'}
  18.     r = requests.get(url, headers = headers)
  19.     return r 
  21. # get the school list
  22. def school_list(filename):
  23.     schools = []
  24.     df = pd.read_csv(filename)
  25.     for i in df["学校名称"]:
  26.         schools.append(i)
  27.     return schools
  29. if __name__ == "__main__":
  30.     school = school_list("School_List_2020.csv")
  31.     # print(school)
  32.     result_data = []
  33.     start_time = time.time()
  34.     for index in tqdm(school):
  35.         url = 'https://baike.baidu.com/item/' + index 
  36.         print(url)
  37.         data = url_open(url)
  38.         soup = BeautifulSoup(data.content, 'html.parser', from_encoding='utf-8')
  39.         name_data = []
  40.         value_data = []
  41.         name_node = soup.find_all('dt', class_='basicInfo-item name')
  42.         # print(name_node)
  43.         for i in range(len(name_node)):
  44.             name_data.append(name_node[i].get_text().replace('\xa0', ''))
  45.             # name_data.append(name_node[i].get_text())
  46.             # print(name_data)
  47.         value_node = soup.find_all('dd', class_='basicInfo-item value')
  48.         for i in range(len(value_node)):
  49.             value_data.append(value_node[i].get_text().replace('\n', ''))
  50.             # print(type(value_node[i].get_text().replace('\n', '')))
  51.             # print(value_node[i].get_text().replace('\n', ''))
  52.             # print(value_data)
  53.             # print(type(value_data))
  54.         result = {'中文名': '无信息', '英文名': '无信息', '简称':'无信息','创办时间': '无信息', '类型': '综合', '主管部门': '无信息'}
  55.         for i in range(len(name_data)):
  56.             if name_data[i] == '中文名':
  57.                 result['中文名'] = value_data[i]
  58.             if name_data[i] in ['英文名','外文名']:
  59.                 result['英文名'] = value_data[i]
  60.             if name_data[i] == '简称':
  61.                 result['简称'] = value_data[i]
  62.             if name_data[i] == '创办时间':
  63.                 result['创办时间'] = value_data[i]
  64.             if name_data[i] == '类型':
  65.                 result['类型'] = value_data[i]
  66.             if name_data[i] == '主管部门':
  67.                 result['主管部门'] = value_data[i]
  68.         result_data.append({'中文名': result['中文名'], '英文名': result['英文名'], '简称': result['简称'], '创办时间': result['创办时间'], '类型': result['类型'], '主管部门': result['主管部门']})
  69.         # print('reading the website...')
  70.         # print(result_data)
  71.     fw = open('all.json', 'w', encoding='utf-8')
  72.     fw.write(json.dumps(result_data, ensure_ascii=False))
  73.     fw.close()
  74.     print('complete!')
  75.     run_time(start_time)

image.png

  • 预计等候15分钟左右

image.png

1.3 json数据清洗

  • json数据清洗分为两步骤：特征提取、linknode构造。
  • 特征提取：主要是把节点属性提取为一个一个的txt文本，方便后续构造node-link-node的三元组形式。 ```python import json

with open(‘./spider/all.json’, ‘r’, encoding=’utf-8’) as fr: str_data = fr.read() full_data = json.loads(str_data) # json 解码 fw1 = open(‘./dataprocess/Name.txt’, ‘w’, encoding=’utf-8’) # 名称list fw2 = open(‘./dataprocess/English.txt’, ‘w’, encoding=’utf-8’) # 英文名list fw3 = open(‘./dataprocess/Abbr.txt’, ‘w’, encoding=’utf-8’) # 简称list fw4 = open(‘./dataprocess/Time.txt’, ‘w’, encoding=’utf-8’) # 创办时间list fw5 = open(‘./dataprocess/Type.txt’, ‘w’, encoding=’utf-8’) # 类型list fw6 = open(‘./dataprocess/Admin.txt’, ‘w’, encoding=’utf-8’) # 主管部门list

  1. for i in range(len(full_data)):
  2.     # 傻瓜式遍历
  3.     for key, value in full_data[i].items():
  4.         if key == '中文名':
  5.             fw1.write("{'中文名': '" + value +"'}\n")
  6.         if key == '英文名':
  7.             fw2.write("{'英文名': '" + value +"'}\n")
  8.         if key == '简称':
  9.             fw3.write("{'简称': '" + value +"'}\n")
  10.         if key == '创办时间':
  11.             # fw4.write("{'创办时间': '" + value[0:4] +"年'}\n")
  12.             fw4.write("{'创办时间': '" + value +"'}\n")
  13.         if key == '类型':
  14.             fw5.write("{'类型': '" + value +"'}\n")
  15.         if key == '主管部门':
  16.             fw6.write("{'主管部门': '" + value +"'}\n")

fw1.close() fw2.close() fw3.close() fw4.close() fw5.close() fw6.close()

  2. - linknode构造
  3. ```python
  4. import json 
  5. import csv 
  7. nodes = []
  8. links = []
  10. name_list = []
  11. english_list = []
  12. abbr_list = []
  13. time_list = []
  14. type_list = []
  15. admin_list = []
  16. # english2_list = []
  17. # time2_list = []
  18. # abbr2_list = []
  20. # central node
  21. nodes.append({'id': '大学', 'class': 'university', 'group': 0, 'size': 22})
  23. # type node
  24. fr = open('./dataprocess/Type.txt', 'r', encoding='utf-8')
  25. for line in fr.readlines():
  26.     tmp = line.strip('\n')
  27.     for key, value in eval(tmp).items():
  28.         if value not in type_list:
  29.             type_list.append(value)
  30.             nodes.append({'id': value, 'class': 'type', 'group': 5,  'size': 18})
  31.             links.append({'source': '大学', 'target': value, 'value': 3})
  32.             links.append({'source': value, 'target': '大学', 'value': 3})
  33. fr.close()
  35. # english node
  36. fr = open('./dataprocess/English.txt', 'r', encoding='utf-8')
  37. for line in fr.readlines():
  38.     tmp = line.strip('\n')
  39.     for key, value in eval(tmp).items():
  40.         if value not in english_list:
  41.             english_list.append(value)
  42.             nodes.append({'id': value, 'class': 'english', 'group': 2,  'size': 15})
  43. fr.close()
  45. # abbr node
  46. fr = open('./dataprocess/Abbr.txt', 'r', encoding='utf-8')
  47. for line in fr.readlines():
  48.     tmp = line.strip('\n')
  49.     for key, value in eval(tmp).items():
  50.         if value not in abbr_list:
  51.             abbr_list.append(value)
  52.             nodes.append({'id': value, 'class': 'abbr', 'group': 3,  'size': 15})
  53. fr.close()
  55. # time node
  56. fr = open('./dataprocess/Time.txt', 'r', encoding='utf-8')
  57. for line in fr.readlines():
  58.     tmp = line.strip('\n')
  59.     for key, value in eval(tmp).items():
  60.         if value not in time_list:
  61.             time_list.append(value)
  62.             nodes.append({'id': value, 'class': 'time', 'group': 4,  'size': 11})
  63. fr.close()
  65. # admin node
  66. fr = open('./dataprocess/Admin.txt', 'r', encoding='utf-8')
  67. for line in fr.readlines():
  68.     tmp = line.strip('\n')
  69.     for key, value in eval(tmp).items():
  70.         if value not in admin_list:
  71.             admin_list.append(value)
  72.             nodes.append({'id': value, 'class': 'admin', 'group': 6,  'size': 11})
  73. fr.close()
  75. # # english2 node
  76. # fr = open('./dataprocess/English.txt', 'r', encoding='utf-8')
  77. # for line in fr.readlines():
  78. #     tmp = line.strip('\n')
  79. #     for key, value in eval(tmp).items():
  80. #         if value not in english2_list:
  81. #             english2_list.append(value)
  82. #             nodes.append({'id': value, 'class': 'english2', 'group': 7,  'size': 13})
  83. # fr.close()
  85. # # abbr2 node
  86. # fr = open('./dataprocess/Abbr.txt', 'r', encoding='utf-8')
  87. # for line in fr.readlines():
  88. #     tmp = line.strip('\n')
  89. #     for key, value in eval(tmp).items():
  90. #         if value not in abbr2_list:
  91. #             abbr2_list.append(value)
  92. #             nodes.append({'id': value, 'class': 'abbr2', 'group': 8,  'size': 13})
  93. # fr.close()
  95. # # time2 node
  96. # fr = open('./dataprocess/Time.txt', 'r', encoding='utf-8')
  97. # for line in fr.readlines():
  98. #     tmp = line.strip('\n')
  99. #     for key, value in eval(tmp).items():
  100. #         if value not in time2_list:
  101. #             time2_list.append(value)
  102. #             nodes.append({'id': value, 'class': 'time2', 'group': 9,  'size': 13})
  103. # fr.close()
  106. with open('./spider/all.json', 'r', encoding='utf-8') as fr:
  107.     str_data = fr.read()
  108.     full_data = json.loads(str_data)
  109.     for i in range(len(full_data)):
  110.         # for key, value in full_data[i].items():
  111.         # name node
  112.         nodes.append({'id': full_data[i]['中文名'], 'class': 'names', 'group': 1, 'size': 20})
  113.         links.append({'source': full_data[i]['类型'], 'target': full_data[i]['中文名'], 'value': 3})
  114.         links.append({'source': full_data[i]['中文名'], 'target': full_data[i]['类型'], 'value': 3})
  115.         # english node
  116.         links.append({'source': full_data[i]['中文名'], 'target': full_data[i]['英文名'], 'value': 3})
  117.         links.append({'source': full_data[i]['英文名'], 'target': full_data[i]['中文名'], 'value': 3})
  118.         # abbr node
  119.         links.append({'source': full_data[i]['中文名'], 'target': full_data[i]['简称'], 'value': 3})
  120.         links.append({'source': full_data[i]['简称'], 'target': full_data[i]['中文名'], 'value': 3})
  121.         # time node
  122.         links.append({'source': full_data[i]['简称'], 'target': full_data[i]['创办时间'], 'value': 3})
  123.         links.append({'source': full_data[i]['创办时间'], 'target': full_data[i]['简称'], 'value': 3})
  124.         # admin node
  125.         links.append({'source': full_data[i]['简称'], 'target': full_data[i]['主管部门'], 'value': 3})
  126.         links.append({'source': full_data[i]['主管部门'], 'target': full_data[i]['简称'], 'value': 3})
  128. fw = open('./nodes.json', 'w', encoding='utf-8')
  129. fw.write(json.dumps({'nodes': nodes, 'links': links}, ensure_ascii=False))
  130. fw.close()

经过一系列处理得到了含node和link信息的 nodes.json 接下来我们通过D3.js进行图谱可视化生成。

2.生成图谱

图谱生成可以用Echarts或者D3.js，Echarts简单易上手但定制不够灵活，D3.js灵活可定制但难上手。根据参考资料，先用D3.js实现整体图谱的展示，并做适当修改美化。

image.png

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="UTF-8"/>
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <title>2020年中国普通高等学校图谱可视化</title>
  9.     <meta name="description" content=""/>
  10.     <meta name="keywords" content=""/>
  11.     <meta name="author" content=""/>
  12.     <link rel="shortcut icon" href="">
  13.     <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
  14.     <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
  15.     <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  16.     <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  17. </head>
  19. <style>
  20.     body {
  21.         background-color: #333333;
  22.         padding: 30px 40px;
  23.         text-align: center;
  24.         font-family: OpenSans-Light, PingFang SC, Hiragino Sans GB, Microsoft Yahei, Microsoft Jhenghei, sans-serif;
  25.     }
  27.     .links line {
  28.         stroke: rgb(240, 240, 240);
  29.         stroke-opacity: 0.8;
  30.     }
  32.     .links line.inactive {
  33.         /*display: none !important;*/
  34.         stroke-opacity: 0;
  35.     }
  37.     .nodes circle {
  38.         stroke: #fff;
  39.         stroke-width: 1.5px;
  40.     }
  42.     .nodes circle:hover {
  43.         cursor: pointer;
  44.     }
  46.     .nodes circle.inactive {
  47.         display: none !important;
  48.     }
  50.     .texts text {
  51.         display: none;
  52.     }
  54.     .texts text:hover {
  55.         cursor: pointer;
  56.     }
  58.     .texts text.inactive {
  59.         display: none !important;
  60.     }
  62.     #indicator {
  63.         position: absolute;
  64.         left: 45px;
  65.         bottom: 50px;
  66.         text-align: left;
  67.         color: #f2f2f2;
  68.         font-size: 20px;
  69.     }
  71.     #indicator > div {
  72.         margin-bottom: 4px;
  73.     }
  75.     #indicator span {
  76.         display: inline-block;
  77.         width: 30px;
  78.         height: 14px;
  79.         position: relative;
  80.         top: 2px;
  81.         margin-right: 8px;
  82.     }
  84.     #mode {
  85.         position: absolute;
  86.         top: 60px;
  87.         left: 45px;
  88.     }
  90.     #mode span {
  91.         display: inline-block;
  92.         border: 1px solid #fff;
  93.         color: #fff;
  94.         padding: 6px 10px;
  95.         border-radius: 4px;
  96.         font-size: 14px;
  97.         transition: color, background-color .3s;
  98.         -o-transition: color, background-color .3s;
  99.         -ms-transition: color, background-color .3s;
  100.         -moz-transition: color, background-color .3s;
  101.         -webkit-transition: color, background-color .3s;
  102.     }
  104.     #mode span.active, #mode span:hover {
  105.         background-color: #fff;
  106.         color: #333;
  107.         cursor: pointer;
  108.     }
  110.     #info {
  111.         position: absolute;
  112.         bottom: 40px;
  113.         right: 30px;
  114.         text-align: right;
  115.         width: 270px;
  116.     }
  118.     #info p {
  119.         color: #fff;
  120.         font-size: 12px;
  121.         margin-bottom: 5px;
  122.         margin-top: 0px;
  123.     }
  125.     #info p span {
  126.         color: #888;
  127.         margin-right: 10px;
  128.     }
  130.     #search input {
  131.         position: absolute;
  132.         top: 100px;
  133.         left: 45px;
  134.         color: #000;
  135.         border: none;
  136.         outline: none;
  137.         box-shadow: none;
  138.         width: 160px;
  139.         background-color: #FFF;
  140.     }
  142.     #svg2 g.row:hover {
  143.         stroke-width: 1px;
  144.         stroke: #fff;
  145.     }
  146. </style>
  148. <body>
  149.     <h1 style="color: #fff;font-size: 32px;text-align: left;margin-left:40px;">2020年中国普通高等学校知识图谱</h1>
  150.     <div style="text-align: center;position: relative;">
  151.         <svg width="1600" height="1200" style="margin-left: 0px;margin-bottom: 0px;" id="svg1"></svg>
  152.         <div id="indicator"></div>
  153.         <div id="mode">
  154.             <span class="active" style="border-top-right-radius: 0;border-bottom-right-radius: 0; ">图形</span>
  155.             <span style="border-top-left-radius: 0;border-bottom-left-radius: 0; position: relative;left: -5px;">文字</span>
  156.         </div>
  157.         <div id="search">
  158.             <input type="text" class="form-control">
  159.         </div>
  160.     </div>
  161.     <div style="text-align: center;position: relative;"></div>
  162.     <div id="info">
  163.         <h4></h4>
  164.     </div>
  165.     <!-- <div id="main" style="width: 600px;height:400px;"></div> -->
  168. </body>
  169. <script src="https://d3js.org/d3.v4.min.js"></script>
  170. <script>
  171.     $(document).ready(function () {
  172.         var svg = d3.select("#svg1"), width = svg.attr('width'), height = svg.attr('height');
  173.         var names = ['大学', '中文名','英文名','简称','创办时间','类型','主管部门'];
  174.         var colors = ['#bd0404','#b7d28d', '#b8f1ed', '#ca635f', '#5153ee','#836FFF', '#f0b631'];
  176.         // 图注
  177.         for (var i = 0; i < names.length; i++) {
  178.             $('#indicator').append("<div><span style='background-color: " + colors[i] + "'></span>" + names[i] + "</div>");
  179.         }
  180.         // 相互作用力,定义鼠标拖拽时的效果
  181.         var simulation = d3.forceSimulation()
  182.             //速度衰减因子，相当于摩擦力，0是无摩擦，1是冻结
  183.             .velocityDecay(0.6)
  184.             // α衰变，借用粒子的放射性的概念，指力的模拟经过一定次数后会逐渐停止；
  185.             // 数值范围也是0-1，如果设为1，经过300次迭代后，模拟就会停止；这里我们设为0，会一直进行模拟。
  186.             .alphaDecay(0)
  187.             //连线间的斥力
  188.             .force("link", d3.forceLink().id(function (d) {
  189.                 return d.id;
  190.             }))
  191.             //斥力
  192.             .force("charge", d3.forceManyBody())
  193.             //中心力
  194.             .force("center", d3.forceCenter(width / 2, height / 2));
  196.         //导图设置
  197.         var graph;
  199.         d3.json("nodes.json", function (error, data) {
  200.             if (error) throw error;
  201.             graph = data;
  202.             console.log(graph);
  204.             var link = svg.append("g").attr("class", "links").selectAll("line").data(graph.links).enter().append("line").attr("stroke-width", function (d) {
  205.                 return 1;
  206.             });
  208.             var node = svg.append("g").attr("class", "nodes").selectAll("circle").data(graph.nodes).enter().append('circle').attr('r', function (d) {
  209.                 return d.size; 
  210.             }).attr("fill", function (d) {
  211.                 return colors[d.group];
  212.             }).attr("stroke", "none").attr("name", function (d) {
  213.                 return d.id;
  214.             }).call(d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended));
  216.             var text =
  217.                 svg.append("g").attr("class", "texts").selectAll("text").data(graph.nodes).enter().append('text').attr("font-size", function (d) {
  218.                     return d.size;
  219.                 }).attr("fill", function (d) {
  220.                     return colors[d.group];
  221.                 }).attr("name", function (d) {
  222.                     return d.id;
  223.                 }).text(function (d) {
  224.                     return d.id;
  225.                 }).attr("text-anchor", 'middle').call(d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended));
  227.             var data = svg.append("g").attr("class", "datas").selectAll("text").data(graph.nodes).enter();
  229.             node.append("title").text(function (d) {
  230.                 return d.id;
  231.             });
  233.             print = node.append("title").text(function (d) {
  234.                 return d.id;
  235.             });
  236.             print.enter().append("text").style("text-anchor", "middle").text(function (d) {
  237.                 return d.name;
  238.             });
  240.             simulation
  241.                 .nodes(graph.nodes)
  242.                 .on("tick", ticked);
  243.             simulation.force("link")
  244.                 .links(graph.links);
  246.             //tick函数的作用：由于力导向图是不断运动的，每一时刻都在发生更新，因此，必须不断更新节点和连线的位置。
  247.             //迭代力项导图位置
  248.             function ticked() {
  249.                 link
  250.                     .attr("x1", function (d) {
  251.                         return d.source.x;
  252.                     })
  253.                     .attr("y1", function (d) {
  254.                         return d.source.y;
  255.                     })
  256.                     .attr("x2", function (d) {
  257.                         return d.target.x;
  258.                     })
  259.                     .attr("y2", function (d) {
  260.                         return d.target.y;
  261.                     });
  262.                 node
  263.                     .attr("cx", function (d) {
  264.                         return d.x;
  265.                     })
  266.                     .attr("cy", function (d) {
  267.                         return d.y;
  268.                     });
  269.                 text.attr('transform', function (d) {
  270.                     return 'translate(' + d.x + ',' + (d.y + d.size / 2) + ')';
  271.                 });
  272.             }
  273.         });
  275.         //激活导图函数
  276.         var dragging = false;
  278.         // 起始位置
  279.         function dragstarted(d) {
  280.             if (!d3.event.active) simulation.alphaTarget(0.6).restart();
  281.             d.fx = d.x;
  282.             d.fy = d.y;
  283.             dragging = true;
  284.         }
  286.         // 画图
  287.         function dragged(d) {
  288.             d.fx = d3.event.x;
  289.             d.fy = d3.event.y;
  290.         }
  291.         // 结束位置 alphaTarget也代表衰减因子，如果设置为1迭代位置后定死位置
  292.         function dragended(d) {
  293.             if (!d3.event.active) simulation.alphaTarget(0);
  294.             d.fx = null;
  295.             d.fy = null;
  296.             dragging = false;
  297.         }
  299.         // 图像/文字 按钮
  300.         $('#mode span').click(function (event) {
  301.             $('#mode span').removeClass('active');
  302.             $(this).addClass('active');
  303.             if ($(this).text() == '图形') {
  304.                 $('.texts text').hide();
  305.                 $('.nodes circle').show();
  306.             }
  307.             else {
  308.                 $('.texts text').show();
  309.                 $('.nodes circle').show();
  310.             }
  311.         });
  314.         $('#svg1').on('mouseenter', '.nodes circle', function (event) {
  315.             if (!dragging) {
  316.                 var name = $(this).attr('name');
  318.                 $('#info h4').css('color', $(this).attr('fill')).text(name);
  319.                 $('#info p').remove();
  320.                 console.log(info[name]);
  321.                 for (var key in info[name]) {
  322.                     if (typeof(info[name][key]) == 'object') {
  323.                         continue;
  324.                     }
  325.                     if (key == 'url' || key == 'title' || key == 'name' || key == 'edited' || key == 'created' || key == 'homeworld') {
  326.                         continue;
  327.                     }
  328.                     $('#info').append('<p><span>' + key + '</span>' + info[name][key] + '</p>');
  329.                 }
  331.                 d3.select("#svg1 .nodes").selectAll('circle').attr('class', function (d) {
  332.                     if (d.id == name) {
  333.                         return '';
  334.                     }
  336.                     for (var i = 0; i < graph.links.length; i++) {
  337.                         if (graph.links[i]['source'].id == name && graph.links[i]['target'].id == d.id) {
  338.                             return '';
  339.                         }
  340.                         if (graph.links[i]['target'].id == name && graph.links[i]['source'].id == d.id) {
  341.                             return '';
  342.                         }
  343.                     }
  345.                     return 'inactive';
  346.                 });
  348.                 d3.select("#svg1 .links").selectAll('line').attr('class', function (d) {
  349.                     if (d.source.id == name || d.target.id == name) {
  350.                         return '';
  351.                     } else {
  352.                         return 'inactive';
  353.                     }
  354.                 });
  355.             }
  356.         });
  358.         $('#svg1').on('mouseleave', '.nodes circle', function (event) {
  359.             if (!dragging) {
  360.                 d3.select('#svg1 .nodes').selectAll('circle').attr('class', '');
  361.                 d3.select('#svg1 .links').selectAll('line').attr('class', '');
  362.             }
  363.         });
  366.         $('#svg1').on('mouseenter', '.texts text', function (event) {
  367.             if (!dragging) {
  368.                 var name = $(this).attr('name');
  369.                 $('#info h4').css('color', $(this).attr('fill')).text(name);
  370.                 $('#info p').remove();
  371.                 for (var key in info[name]) {
  372.                     if (typeof(info[name][key]) == 'object') {
  373.                         continue;
  374.                     }
  375.                     if (key == 'url' || key == 'title' || key == 'name' || key == 'edited' || key == 'created' || key == 'homeworld') {
  376.                         continue;
  377.                     }
  378.                     $('#info').append('<p><span>' + key + '</span>' + info[name][key] + '</p>');
  379.                 }
  380.                 d3.select('#svg1 .texts').selectAll('text').attr('class', function (d) {
  381.                     if (d.id == name) {
  382.                         return '';
  383.                     }
  384.                     for (var i = 0; i < graph.links.length; i++) {
  385.                         if (graph.links[i]['source'].id == name && graph.links[i]['target'].id == d.id) {
  386.                             return '';
  387.                         }
  388.                         if (graph.links[i]['target'].id == name && graph.links[i]['source'].id == d.id) {
  389.                             return '';
  390.                         }
  391.                     }
  392.                     return 'inactive';
  393.                 });
  394.                 d3.select("#svg1 .links").selectAll('line').attr('class', function (d) {
  395.                     if (d.source.id == name || d.target.id == name) {
  396.                         return '';
  397.                     } else {
  398.                         return 'inactive';
  399.                     }
  400.                 });
  401.             }
  402.         });
  404.         $('#svg1').on('mouseleave', '.texts text', function (event) {
  405.             if (!dragging) {
  406.                 d3.select('#svg1 .texts').selectAll('text').attr('class', '');
  407.                 d3.select('#svg1 .links').selectAll('line').attr('class', '');
  408.             }
  409.         });
  411.         $('#search input').keyup(function (event) {
  412.             if ($(this).val() == '') {
  413.                 d3.select('#svg1 .texts').selectAll('text').attr('class', '');
  414.                 d3.select('#svg1 .nodes').selectAll('circle').attr('class', '');
  415.                 d3.select('#svg1 .links').selectAll('line').attr('class', '');
  416.             }
  417.             else {
  418.                 var name = $(this).val();
  419.                 d3.select('#svg1 .nodes').selectAll('circle').attr('class', function (d) {
  420.                     if (d.id.toLowerCase().indexOf(name.toLowerCase()) >= 0) {
  421.                         return '';
  422.                     } else {
  423.                         return 'inactive';
  424.                     }
  425.                 });
  426.                 d3.select('#svg1 .texts').selectAll('text').attr('class', function (d) {
  427.                     if (d.id.toLowerCase().indexOf(name.toLowerCase()) >= 0) {
  428.                         return '';
  429.                     } else {
  430.                         return 'inactive';
  431.                     }
  432.                 });
  433.                 d3.select("#svg1 .links").selectAll('line').attr('class', function (d) {
  434.                     return 'inactive';
  435.                 });
  436.             }
  437.         });
  439.         var info;
  441.         d3.json("all.json", function (error, data) {
  442.             info = data;
  443.         });
  446.     });
  447. </script>
  449. </html>

3.本地部署

当前目录下的结构如下图：

  1.    all.json
  2. │  creatNodeLink.ipynb
  3. │  getFeature.ipynb
  4. │  index.html
  5. │  nodes.json
  6. │  School_list_2020.csv
  7. │  Spider_school.ipynb
  8. │  全国高等学校名单.xls
  9. │
  10. └─dataprocess
  11.         Abbr.txt
  12.         Admin.txt
  13.         English.txt
  14.         Name.txt
  15.         Time.txt
  16.         Type.txt
  • 移动到当前index.html目录下，在目录下进入cmd命令，输入以下代码，快速假设本地服务器。
  • python3一行代码搞定服务器
    1. python -m http.server 8000
    打开浏览器 http://localhost:8000/ ，查看自己的图谱吧
    image.png
    Demo预览：http://yzy616.xyz/
    接下来，不管是增加下游任务，或是添加事务功能。
    不管怎么说，先做增删改查，对于图数据库的内容还不是很熟悉，后续会由实验室的老武同学完善Neo4j相关协助开发。

    4.下游任务

    待开发