人工智能——知识图谱表示法(添加人物关系搜索)——使用Echarts关系图展示《红楼梦》人物关系图谱
导语：
由于浏览器安全限制，浏览器并不能直接访问电脑本地文件，因此我在代码中访问本地json数据文件，直接打开HTML文件是不行的。我这里使用了VS code中的插件——Live Server，具体的用法可以参考vscode下关于Live Server的使用
，在点击右下角的Go Live后即可自动跳转浏览器。项目完整文件见人工智能——知识图谱表示法(添加人物关系搜索)——使用Echarts关系图展示《红楼梦》人物关系图谱
效果图
代码：
代码过长，点击展开，建议电脑端打开
<!DOCTYPE html>
<html style="height: 100%" lang="zh-CN">
<head>
<title>人工智能第二次作业——知识图谱</title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<style>
.search {
background: #fff;
text-align: right;
}
.search input {
vertical-align: bottom;
-webkit-appearance:none;
-moz-appearance: none;
height: 5vmin;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #fff;
border-bottom: 2px solid #a5a0a0;
border-radius: 5px;
top: 0;
right: 0;
outline: 0;;
}
.search button {
height:5vmin;
background: #fff;
border-radius: 0 5px 5px 0;
border-color:#fff;
width: 60px;
top: 0;
right: 0;
}
.search button:before {
content: "搜索";
font-size: 13px;
color: #a5a0a0;
}
</style>
</head>
<body style="height: 100%; margin: 0">
<!-- 绘制搜索框 -->
<div class="search">
<form>
<input type="text" class="searchtext" placeholder="请输入您要搜索的人物姓名..." onkeyup="this.value=this.value.replace(/[, ]/g,'')">
<button type="button" class="searchbt"></button>
</form>
</div>
<div class="search">
<form>
<input type="text" class="searchtextbakone" placeholder="二人间关系，人物姓名一..." onkeyup="this.value=this.value.replace(/[, ]/g,'')">——
<input type="text" class="searchtextbaktwo" placeholder="二人间关系，人物姓名二..." onkeyup="this.value=this.value.replace(/[, ]/g,'')">
<button type="button" class="searchbtbak"></button>
</form>
</div>
<div id="container" style="height: 100%">
</div>
<script src="http://yourjavascript.com/95122811714/notiflix-aio-2-7-0-min.js" type="text/javascript"></script> <!--引入notiflix.js提示插件 -->
<script type="text/javascript">
$.ajaxSetup({ async: false });//异步
var myChart = echarts.init(document.getElementById("container"));
var app = {};
var option;
myChart.showLoading();
var rela = { "data": [], "links": [] };
var relabak = { "data": [], "links": [] };//数据备份
$.getJSON('./honglou.json', function (json) {/*由于浏览器无法跨域访问本地的json文件，因此我采用了VS code的Live Server插件来模仿服务器请求*/
rela = json;
relabak=json;
});
myChart.hideLoading();
function optionchange(){
option = {
// backgroundColor: "white",
title: {
text: '红楼梦人物关系图谱',
textStyle: {
// color: "white",
fontWeight: "lighter",
}
},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
legend: {
x: "center",
show: true,
data: ["贾家荣国府", "贾家宁国府", "王家", "史家", "薛家", "其他", "林家"]
},
series: [
{
type: 'graph',
layout: 'circular',
symbolSize: 45,
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 4],
edgeLabel: {
normal: {
show: true,
textStyle: {
fontSize: 10
},
formatter: "{c}"
}
},
force: {
repulsion: 2500,
edgeLength: [10, 100]
},
focusNodeAdjacency: true,
draggable: true,
roam: true,
categories: [{
name: '贾家荣国府',
// itemStyle: {
// normal: {
// color: "#009800",
// }
// }
}, {
name: '贾家宁国府',
// itemStyle: {
// normal: {
// color: "#4592FF",
// }
// }
}, {
name: '王家',
// itemStyle: {
// normal: {
// color: "#3592F",
// }
// }
},
{
name: '史家',
}, {
name: '薛家',
}, {
name: '其他',
},
{
name: '林家',
}
],
label: {
normal: {
show: true,
textStyle: {
fontSize: 12
},
}
},
force: {
repulsion: 1000
},
tooltip: {
formatter: function (node) { // 区分连线和节点，节点上额外显示其他数字
if (!node.value) {
return node.data.name;
} else {
return node.data.name + ":" + node.data.showNum;
}
},
},
lineStyle: {
normal: {
opacity: 0.9,
width: 1,
curveness: 0.3
}
},
// progressiveThreshold: 700,
nodes: rela.data,
links: rela.links,
}
]
};
}
optionchange();
myChart.setOption(option, true);
if (option && typeof option === 'object') {
myChart.setOption(option);
}
function isidin(idd){//判断是否包含函数
for(var i in rela.links){
if(rela.links[i].source==idd||rela.links[i].target==idd){
return true;
break;
}
}
return false;
}
function isotheridin(iddone,iddtwo){//判断是否存在关系函数
var relationid=new Array();
for(var i in rela.links){
if(rela.links[i].source==iddone||rela.links[i].target==iddone){
if(rela.links[i].source==iddone){
for(var m in rela.links){
if((rela.links[m].source==iddtwo||rela.links[m].target==iddtwo)&&(rela.links[m].source==rela.links[i].target||rela.links[m].target==rela.links[i].target))
relationid.push(rela.links[i].target);
}
}
else{
for(var m in rela.links){
if((rela.links[m].source==iddtwo||rela.links[m].target==iddtwo)&&(rela.links[m].source==rela.links[i].source||rela.links[m].target==rela.links[i].source))
relationid.push(rela.links[i].source);
}
}
}
}
relationid.push(iddone);
relationid.push(iddtwo);
return relationid;
}
//实现搜索
$(".searchbt").click(function(){
rela=JSON.parse(JSON.stringify(relabak));//恢复最原始数据
if($(".searchtext").val()=="" ||$(".searchtext").val()==null||$(".searchtext").val()==" "){
Notiflix.Report.Failure( '错误', '请先输入人物姓名！^_^', '确认' );//为空报错
}
else{
for(var i in rela.data)
if(rela.data[i].name==$(".searchtext").val()){
var searchid=rela.data[i].id;
}
rela.links=rela.links.filter(function(link, index, array){
return link.source==searchid||link.target==searchid;
});
for(var i in rela.data)
if(isidin(rela.data[i].id)!=true){
rela.data[i].name="";
}
optionchange();
myChart.setOption(option);
// Notiflix.Loading.Hourglass('正在识别中，请稍后^_^...');
// Notiflix.Loading.Remove();
}
$(".searchtext").val("");//清空搜索框的值
});
$(".searchbtbak").click(function(){
rela=JSON.parse(JSON.stringify(relabak));//恢复最原始数据
if($(".searchtextbakone").val()=="" ||$(".searchtextbakone").val()==null||$(".searchtextbaktwo").val()=="" ||$(".searchtextbaktwo").val()==null){
Notiflix.Report.Failure( '错误', '请先输入人物姓名！^_^', '确认' );//为空报错
}
else{
for(var i in rela.data){
if(rela.data[i].name==$(".searchtextbakone").val()){
var searchidone=rela.data[i].id;
}
if(rela.data[i].name==$(".searchtextbaktwo").val()){
var searchidtwo=rela.data[i].id;
}
}
var relationid=new Array;
relationid=isotheridin(searchidone,searchidtwo);
console.log(relationid);
rela.links=rela.links.filter(function(link, index, array){
return (relationid.indexOf(link.source)!=-1&&relationid.indexOf(link.target)!=-1);
});
for(var i in rela.data)
if(isidin(rela.data[i].id)!=true){
rela.data[i].name="";
}
optionchange();
myChart.setOption(option);
}
$(".searchtextbakone").val("");//清空搜索框的值
$(".searchtextbaktwo").val("");//清空搜索框的值
});
</script>
</body>
</html>
使用到的json数据
代码过长，点击展开，建议电脑端打开
{"data":[{"id":0,"name":"贾雨村","category":5},{"id":1,"name":"贾琏","category":0},{"id":2,"name":"王夫人","category":2},{"id":3,"name":"林之孝家的","category":5},{"id":4,"name":"甄应嘉","category":5},{"id":5,"name":"秦可卿","category":1},{"id":6,"name":"芳官","category":0},{"id":7,"name":"李纨","category":0},{"id":8,"name":"夏金桂","category":4},{"id":9,"name":"柳五儿","category":0},{"id":10,"name":"贾珠","category":0},{"id":11,"name":"四儿","category":0},{"id":12,"name":"贾珍","category":1},{"id":13,"name":"茗烟","category":0},{"id":14,"name":"贾蓉","category":1},{"id":15,"name":"薛蝌","category":4},{"id":16,"name":"坠儿","category":0},{"id":17,"name":"贾环","category":0},{"id":18,"name":"赖尚荣","category":5},{"id":19,"name":"贾宝玉","category":0},{"id":20,"name":"甄士隐","category":5},{"id":21,"name":"马道婆","category":5},{"id":22,"name":"贾政","category":0},{"id":23,"name":"尤三姐","category":1},{"id":24,"name":"秦钟","category":5},{"id":25,"name":"王熙凤","category":2},{"id":26,"name":"袭人","category":0},{"id":27,"name":"刘姥姥","category":5},{"id":28,"name":"王狗儿","category":5},{"id":29,"name":"入画","category":1},{"id":30,"name":"林红玉","category":5},{"id":31,"name":"周瑞家的","category":5},{"id":32,"name":"贾敬","category":1},{"id":33,"name":"孙绍祖","category":5},{"id":34,"name":"贾惜春","category":1},{"id":35,"name":"傻大姐","category":5},{"id":36,"name":"晴雯","category":0},{"id":37,"name":"李嬷嬷","category":5},{"id":38,"name":"贾代化","category":1},{"id":39,"name":"林如海","category":6},{"id":40,"name":"甄宝玉","category":5},{"id":41,"name":"秋桐","category":0},{"id":42,"name":"金文翔家的","category":5},{"id":43,"name":"鸳鸯","category":0},{"id":44,"name":"冷子兴","category":5},{"id":45,"name":"薛蟠","category":4},{"id":46,"name":"焦大","category":1},{"id":47,"name":"宝珠","category":1},{"id":48,"name":"吴贵","category":5},{"id":49,"name":"佩凤","category":1},{"id":50,"name":"龄官","category":5},{"id":51,"name":"莺儿黄金莺","category":5},{"id":52,"name":"贾敏","category":0},{"id":53,"name":"瑞珠","category":1},{"id":54,"name":"尤氏继母","category":1},{"id":55,"name":"娇杏","category":5},{"id":56,"name":"薛宝钗","category":4},{"id":57,"name":"邢夫人","category":0},{"id":58,"name":"薛姨妈","category":2},{"id":59,"name":"林黛玉","category":6},{"id":60,"name":"秦邦业","category":5},{"id":61,"name":"藕官","category":5},{"id":62,"name":"王善保家的","category":5},{"id":63,"name":"贾探春","category":0},{"id":64,"name":"薛宝琴","category":4},{"id":65,"name":"麝月","category":0},{"id":66,"name":"贾演","category":1},{"id":67,"name":"贾迎春","category":0},{"id":68,"name":"妙玉","category":5},{"id":69,"name":"玉钏儿","category":0},{"id":70,"name":"秋纹","category":0},{"id":71,"name":"智能儿","category":5},{"id":72,"name":"王子腾","category":2},{"id":73,"name":"柳湘莲","category":5},{"id":74,"name":"金钏儿","category":0},{"id":75,"name":"尤氏","category":1},{"id":76,"name":"邢岫烟","category":5},{"id":77,"name":"香菱","category":5},{"id":78,"name":"贾源","category":0},{"id":79,"name":"贾元春","category":0},{"id":80,"name":"赵姨娘","category":0},{"id":81,"name":"邢忠","category":5},{"id":82,"name":"史湘云","category":3},{"id":83,"name":"雪雁","category":0},{"id":84,"name":"紫鹃鹦哥","category":0},{"id":85,"name":"金文翔","category":5},{"id":86,"name":"彩云","category":0},{"id":87,"name":"贾母","category":3},{"id":88,"name":"贾代善","category":0},{"id":89,"name":"巧姐","category":0},{"id":90,"name":"赖大","category":1},{"id":91,"name":"尤二姐","category":1},{"id":92,"name":"林之孝","category":5},{"id":93,"name":"封肃","category":5},{"id":94,"name":"香菱甄英莲","category":5},{"id":95,"name":"宝蟾","category":5},{"id":96,"name":"彩霞","category":0},{"id":97,"name":"李贵","category":5},{"id":98,"name":"药官","category":5},{"id":99,"name":"赖嬷嬷","category":5},{"id":100,"name":"蒋玉菡","category":5},{"id":101,"name":"金钏","category":0},{"id":102,"name":"贾兰","category":0},{"id":103,"name":"贾蔷","category":1},{"id":104,"name":"偕鸾","category":1},{"id":105,"name":"贾赦","category":0}],"links":[{"source":72,"target":25,"value":"伯父"},{"source":51,"target":56,"value":"丫头"},{"source":0,"target":59,"value":"老师"},{"source":35,"target":87,"value":"丫头"},{"source":50,"target":103,"value":"相好"},{"source":61,"target":59,"value":"丫环"},{"source":61,"target":98,"value":"相好"},{"source":99,"target":90,"value":"母亲"},{"source":18,"target":99,"value":"孙子"},{"source":48,"target":36,"value":"姑舅哥哥"},{"source":45,"target":58,"value":"儿子"},{"source":15,"target":58,"value":"侄儿"},{"source":76,"target":57,"value":"侄女"},{"source":76,"target":81,"value":"女儿"},{"source":76,"target":15,"value":"妻"},{"source":64,"target":15,"value":"胞妹"},{"source":64,"target":58,"value":"侄女"},{"source":8,"target":45,"value":"妻"},{"source":94,"target":45,"value":"妾"},{"source":77,"target":20,"value":"女儿"},{"source":20,"target":77,"value":"父亲"},{"source":95,"target":8,"value":"陪房丫头"},{"source":80,"target":63,"value":"母亲"},{"source":80,"target":17,"value":"母亲"},{"source":80,"target":22,"value":"妾"},{"source":58,"target":64,"value":"姑母"},{"source":58,"target":45,"value":"母亲"},{"source":58,"target":2,"value":"姐妹"},{"source":101,"target":2,"value":"大丫环"},{"source":86,"target":2,"value":"大丫头"},{"source":96,"target":2,"value":"大丫头"},{"source":69,"target":2,"value":"丫头"},{"source":69,"target":74,"value":"妹妹"},{"source":74,"target":69,"value":"姐姐"},{"source":10,"target":19,"value":"哥哥"},{"source":10,"target":7,"value":"丈夫"},{"source":10,"target":22,"value":"长子"},{"source":10,"target":2,"value":"长子"},{"source":7,"target":19,"value":"嫂子"},{"source":7,"target":10,"value":"妻"},{"source":102,"target":7,"value":"儿子"},{"source":102,"target":10,"value":"儿子"},{"source":79,"target":2,"value":"长女"},{"source":79,"target":22,"value":"长女"},{"source":19,"target":59,"value":"表兄妹"},{"source":19,"target":56,"value":"丈夫"},{"source":19,"target":2,"value":"次子"},{"source":19,"target":22,"value":"次子"},{"source":56,"target":58,"value":"女儿"},{"source":56,"target":19,"value":"妻"},{"source":26,"target":19,"value":"丫环"},{"source":65,"target":19,"value":"丫环"},{"source":70,"target":19,"value":"丫环"},{"source":36,"target":19,"value":"丫环"},{"source":16,"target":19,"value":"丫环"},{"source":11,"target":19,"value":"丫环"},{"source":9,"target":19,"value":"丫环"},{"source":9,"target":6,"value":"好朋友"},{"source":6,"target":19,"value":"丫环"},{"source":13,"target":19,"value":"小厮"},{"source":17,"target":80,"value":"儿子"},{"source":17,"target":22,"value":"儿子"},{"source":63,"target":80,"value":"女儿"},{"source":63,"target":22,"value":"女儿"},{"source":103,"target":12,"value":"养子"},{"source":85,"target":87,"value":"买办"},{"source":85,"target":43,"value":"哥哥"},{"source":42,"target":43,"value":"嫂子"},{"source":31,"target":2,"value":"陪房"},{"source":62,"target":57,"value":"陪房"},{"source":55,"target":0,"value":"二夫人"},{"source":93,"target":20,"value":"岳父"},{"source":40,"target":4,"value":"儿子"},{"source":68,"target":19,"value":"朋友"},{"source":68,"target":59,"value":"朋友"},{"source":73,"target":45,"value":"好兄弟"},{"source":100,"target":26,"value":"夫妻"},{"source":100,"target":19,"value":"好友"},{"source":44,"target":0,"value":"好友"},{"source":44,"target":31,"value":"女婿"},{"source":21,"target":19,"value":"乾娘"},{"source":71,"target":24,"value":"暧昧"},{"source":24,"target":60,"value":"儿子"},{"source":23,"target":91,"value":"妹妹"},{"source":23,"target":91,"value":"妹妹"},{"source":23,"target":54,"value":"女儿"},{"source":60,"target":5,"value":"养父"},{"source":60,"target":24,"value":"父亲"},{"source":82,"target":87,"value":"孙女"},{"source":82,"target":56,"value":"朋友"},{"source":82,"target":59,"value":"朋友"},{"source":82,"target":19,"value":"朋友"},{"source":66,"target":78,"value":"兄弟"},{"source":66,"target":46,"value":"主人"},{"source":66,"target":38,"value":"父亲"},{"source":38,"target":32,"value":"父亲"},{"source":38,"target":66,"value":"儿子"},{"source":32,"target":12,"value":"父亲"},{"source":32,"target":38,"value":"儿子"},{"source":46,"target":66,"value":"老奴"},{"source":12,"target":34,"value":"父亲"},{"source":12,"target":14,"value":"父亲"},{"source":12,"target":75,"value":"丈夫"},{"source":12,"target":32,"value":"儿子"},{"source":75,"target":34,"value":"母亲"},{"source":75,"target":12,"value":"妻"},{"source":49,"target":12,"value":"妾"},{"source":104,"target":12,"value":"妾"},{"source":14,"target":5,"value":"丈夫"},{"source":14,"target":12,"value":"儿子"},{"source":5,"target":14,"value":"妻"},{"source":53,"target":5,"value":"丫环"},{"source":47,"target":5,"value":"丫环"},{"source":29,"target":34,"value":"丫环"},{"source":34,"target":75,"value":"女儿"},{"source":34,"target":12,"value":"女儿"},{"source":78,"target":88,"value":"父亲"},{"source":88,"target":105,"value":"父亲"},{"source":88,"target":22,"value":"父亲"},{"source":88,"target":87,"value":"丈夫"},{"source":88,"target":78,"value":"儿子"},{"source":87,"target":59,"value":"外祖母"},{"source":87,"target":57,"value":"婆婆"},{"source":87,"target":105,"value":"母亲"},{"source":87,"target":88,"value":"妻"},{"source":22,"target":105,"value":"兄弟"},{"source":22,"target":63,"value":"父亲"},{"source":22,"target":17,"value":"父亲"},{"source":22,"target":19,"value":"父亲"},{"source":22,"target":79,"value":"父亲"},{"source":22,"target":10,"value":"父亲"},{"source":22,"target":2,"value":"丈夫"},{"source":22,"target":87,"value":"次子"},{"source":22,"target":88,"value":"儿子"},{"source":105,"target":67,"value":"父亲"},{"source":105,"target":1,"value":"父亲"},{"source":105,"target":57,"value":"丈夫"},{"source":105,"target":87,"value":"大儿子"},{"source":105,"target":88,"value":"儿子"},{"source":57,"target":25,"value":"婆婆"},{"source":57,"target":87,"value":"大儿媳"},{"source":57,"target":105,"value":"妻"},{"source":2,"target":19,"value":"母亲"},{"source":2,"target":79,"value":"母亲"},{"source":2,"target":10,"value":"母亲"},{"source":2,"target":58,"value":"姐妹"},{"source":2,"target":22,"value":"妻"},{"source":2,"target":87,"value":"小儿媳"},{"source":43,"target":87,"value":"丫头"},{"source":39,"target":59,"value":"父亲"},{"source":39,"target":52,"value":"丈夫"},{"source":52,"target":105,"value":"兄妹"},{"source":52,"target":22,"value":"兄妹"},{"source":52,"target":87,"value":"女儿"},{"source":52,"target":59,"value":"母亲"},{"source":52,"target":39,"value":"妻"},{"source":59,"target":19,"value":"表兄妹"},{"source":59,"target":87,"value":"外孙女"},{"source":59,"target":39,"value":"女儿"},{"source":84,"target":87,"value":"丫头"},{"source":83,"target":59,"value":"丫头"},{"source":25,"target":2,"value":"内侄女"},{"source":25,"target":89,"value":"母亲"},{"source":25,"target":1,"value":"妻"},{"source":25,"target":57,"value":"儿媳"},{"source":41,"target":105,"value":"妾"},{"source":41,"target":105,"value":"丫环"},{"source":1,"target":89,"value":"父亲"},{"source":1,"target":25,"value":"丈夫"},{"source":1,"target":105,"value":"儿子"},{"source":67,"target":33,"value":"妻"},{"source":67,"target":105,"value":"女儿"},{"source":89,"target":27,"value":"被抚养"},{"source":89,"target":1,"value":"女儿"},{"source":89,"target":25,"value":"女儿"},{"source":27,"target":28,"value":"岳母"},{"source":91,"target":1,"value":"二房"},{"source":91,"target":54,"value":"女儿"},{"source":92,"target":30,"value":"父"},{"source":3,"target":30,"value":"母"},{"source":37,"target":97,"value":"母"},{"source":37,"target":19,"value":"乳母"}]}
