p42689073
/
geo_info_platform
forked from p51497208/geo_info_platform
1
0
Fork 0
Code Issues Pull Requests 1 Releases 1 Wiki Activity

modify content of knowledge graph

This commit is contained in:
sulenn 2019-12-10 18:11:04 +08:00
parent 194642439b
commit 0473c67f79
2 changed files with 236 additions and 508 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

646
demo.html
View File

@ -1004,517 +1004,96 @@
});
graphList = {"keyword":{
"nodes":[],
"links":[]
}}
currentGraph = {
nodes: {},
links: {},
};
nodeMap = {};
category = 1
level = "level"
symbolSize = 40
myChart.on('click', function(params) {
var city = params.name;
graphList = {"keyword":{
"nodes":[],
"links":[]
}}
currentGraph = {
nodes: {},
links: {},
}
nodeMap = {};
category = 1
symbolSize = 40
init(city)
});
myChart.setOption(option);
// 知识图谱
var graphList = {
"hunan":{
"nodes": [{
"name": "湖南",
"category": "province",
"symbolSize": 40,
},
{
"name": "长沙",
"category": "city",
"symbolSize": 30,
},
{
"name": "开福区",
"category": "area",
"symbolSize": 25
},
{
"name": "芙蓉区",
"category": "area",
"symbolSize": 25,
},
{
"name": "天心区",
"category": "area",
"symbolSize": 25
},
{
"name": "娄底",
"category": "city",
"symbolSize": 30
},
{
"name": "岳阳",
"category": "city",
"symbolSize": 30
},
{
"name": "湘潭",
"category": "city",
"symbolSize": 30,
},
{
"name": "人口",
"category": "attribute",
"symbolSize": 20,
},
{
"name": "占地面积",
"category": "attribute",
"symbolSize": 20,
function fillInfo(result) {
// graphList = {"keyword":{
// "nodes":[],
// "links":[]
// }}
if (graphList.keyword.nodes.length == 0) {
formNode = {"name":result.data.entity, "category":category, "symbolSize":symbolSize}
graphList.keyword.nodes[0]=formNode
category += 1
symbolSize -= 5
}
else if (graphList.keyword.nodes[0].name == result.data.entity) {
return 0
}
nodeLen = graphList.keyword.nodes.length
linkLen = graphList.keyword.links.length
source = result.data.entity
// console.log(result)
for (i = 0; i < result.data.avp.length; i++) {
formNode = {"name":result.data.avp[i][1], "category":category, "symbolSize":symbolSize}
graphList.keyword.nodes[nodeLen+i]=formNode
formLink = {"source":source, "target":result.data.avp[i][1]}
graphList.keyword.links[linkLen+i]=formLink
}
// console.log(graphList)
}
],
"links": [{
"source": "湖南",
"target": "长沙"
},
{
"source": "长沙",
"target": "开福区"
},
{
"source": "开福区",
"target": "人口"
},
{
"source": "开福区",
"target": "占地面积"
},
{
"source": "长沙",
"target": "天心区"
},
{
"source": "长沙",
"target": "芙蓉区"
},
{
"source": "湖南",
"target": "娄底"
},
{
"source": "湖南",
"target": "岳阳"
},
{
"source": "湖南",
"target": "湘潭"
}
]
},
"xinjiang":{
"nodes": [{
"name": "新疆",
"category": "province",
"symbolSize": 40,
},
{
"name": "乌鲁木齐市",
"category": "city",
"symbolSize": 30,
},
{
"name": "克拉玛依市",
"category": "city",
"symbolSize": 30
},
{
"name": "吐鲁番市",
"category": "city",
"symbolSize": 30,
},
{
"name": "哈密市",
"category": "city",
"symbolSize": 30
},
{
"name": "水磨沟区",
"category": "area",
"symbolSize": 25
},
{
"name": "天山区",
"category": "area",
"symbolSize": 25
},
{
"name": "沙依巴克区",
"category": "area",
"symbolSize": 25,
},
{
"name": "人口",
"category": "attribute",
"symbolSize": 20,
},
{
"name": "占地面积",
"category": "attribute",
"symbolSize": 20,
}
],
"links": [{
"source": "新疆",
"target": "乌鲁木齐市"
},
{
"source": "新疆",
"target": "克拉玛依市"
},
{
"source": "新疆",
"target": "吐鲁番市"
},
{
"source": "新疆",
"target": "哈密市"
},
{
"source": "乌鲁木齐市",
"target": "水磨沟区"
},
{
"source": "乌鲁木齐市",
"target": "天山区"
},
{
"source": "乌鲁木齐市",
"target": "沙依巴克区"
},
{
"source": "天山区",
"target": "人口"
},
{
"source": "天山区",
"target": "占地面积"
}
]},
"xizang":{
"nodes": [{
"name": "西藏",
"category": "province",
"symbolSize": 40,
},
{
"name": "拉萨市",
"category": "city",
"symbolSize": 30,
},
{
"name": "日喀则市",
"category": "city",
"symbolSize": 30
},
{
"name": "昌都市",
"category": "city",
"symbolSize": 30,
},
{
"name": "林芝市",
"category": "city",
"symbolSize": 30
},
{
"name": "城关区",
"category": "area",
"symbolSize": 25
},
{
"name": "堆龙德庆区",
"category": "area",
"symbolSize": 25
},
{
"name": "达孜区",
"category": "area",
"symbolSize": 25,
},
{
"name": "人口",
"category": "attribute",
"symbolSize": 20,
},
{
"name": "占地面积",
"category": "attribute",
"symbolSize": 20,
}
],
"links": [{
"source": "西藏",
"target": "拉萨市"
},
{
"source": "西藏",
"target": "林芝市"
},
{
"source": "西藏",
"target": "日喀则市"
},
{
"source": "西藏",
"target": "昌都市"
},
{
"source": "拉萨市",
"target": "城关区"
},
{
"source": "拉萨市",
"target": "堆龙德庆区"
},
{
"source": "拉萨市",
"target": "达孜区"
},
{
"source": "达孜区",
"target": "人口"
},
{
"source": "达孜区",
"target": "占地面积"
}
]},
"qinghai":{
"nodes": [{
"name": "青海",
"category": "province",
"symbolSize": 40,
},
{
"name": "西宁市",
"category": "city",
"symbolSize": 30,
},
{
"name": "海东市",
"category": "city",
"symbolSize": 30
},
{
"name": "德令哈市",
"category": "city",
"symbolSize": 30,
},
{
"name": "格尔木市",
"category": "city",
"symbolSize": 30
},
{
"name": "城东区",
"category": "area",
"symbolSize": 25
},
{
"name": "城中区",
"category": "area",
"symbolSize": 25
},
{
"name": "城西区",
"category": "area",
"symbolSize": 25,
},
{
"name": "人口",
"category": "attribute",
"symbolSize": 20,
},
{
"name": "占地面积",
"category": "attribute",
"symbolSize": 20,
}
],
"links": [{
"source": "青海",
"target": "西宁市"
},
{
"source": "青海",
"target": "海东市"
},
{
"source": "青海",
"target": "德令哈市"
},
{
"source": "青海",
"target": "格尔木市"
},
{
"source": "西宁市",
"target": "城东区"
},
{
"source": "西宁市",
"target": "城中区"
},
{
"source": "西宁市",
"target": "城西区"
},
{
"source": "城西区",
"target": "人口"
},
{
"source": "城西区",
"target": "占地面积"
}
]},
"gansu":{
"nodes": [{
"name": "甘肃",
"category": "province",
"symbolSize": 40,
},
{
"name": "兰州市",
"category": "city",
"symbolSize": 30,
},
{
"name": "嘉峪关市",
"category": "city",
"symbolSize": 30
},
{
"name": "金昌市",
"category": "city",
"symbolSize": 30,
},
{
"name": "白银市",
"category": "city",
"symbolSize": 30
},
{
"name": "七里河区",
"category": "area",
"symbolSize": 25
},
{
"name": "安宁区",
"category": "area",
"symbolSize": 25
},
{
"name": "西固区",
"category": "area",
"symbolSize": 25,
},
{
"name": "人口",
"category": "attribute",
"symbolSize": 20,
},
{
"name": "占地面积",
"category": "attribute",
"symbolSize": 20,
}
],
"links": [{
"source": "甘肃",
"target": "兰州市"
},
{
"source": "甘肃",
"target": "嘉峪关市"
},
{
"source": "甘肃",
"target": "金昌市"
},
{
"source": "甘肃",
"target": "白银市"
},
{
"source": "兰州市",
"target": "七里河区"
},
{
"source": "兰州市",
"target": "安宁区"
},
{
"source": "兰州市",
"target": "西固区"
},
{
"source": "西固区",
"target": "人口"
},
{
"source": "西固区",
"target": "占地面积"
}
]}
};
const defaultCategory = "province";
const currentGraph = {
nodes: {},
links: {},
};
const nodeMap = {};
// 页面加载时，第一次初始化图，以及点击省份后更换数据
function sync_request(url){
//实例化XmlHttpRequest对象
var xhr=new XMLHttpRequest();
//使用GET方式请求指定网址的页面
xhr.open("GET",url,false);
//发送空内容请求
xhr.send(null);
if(xhr.status===200){//200状态码表示正常
result = xhr.responseText
// console.log(JSON.parse(result))
return JSON.parse(result)
}else{
alert("Error occurred:"+xhr.statusText);
}
}
function init(name) {
// 根据定义的常量，产生currentGraph的默认数据
// 遍历全部nodes和links，产生node映射map
if (name === undefined){
graph = graphList.hunan
}
else {
currentGraph.nodes = {}
currentGraph.links = {}
if (name=='新疆') {
graph = graphList.xinjiang
}
else if (name=="西藏") {
graph = graphList.xizang
}
else if (name=="青海") {
graph = graphList.qinghai
}
else if (name=="青海") {
graph = graphList.qinghai
}
else if (name=="甘肃") {
graph = graphList.gansu
}
else {
graph = graphList.hunan
}
result = sync_request('https://api.ownthink.com/kg/knowledge?entity='+name)
if (!result.data) {
alert("nothing")
return 0
}
fillInfo(result)
nodeMap = {};
graph = graphList.keyword
for (let i = 0; i < graph.nodes.length; i++) {
if (graph.nodes[i].category === defaultCategory) {
if (graph.nodes[i].category === 1) {
currentGraph.nodes[graph.nodes[i].name] = graph.nodes[i];
}
nodeMap[graph.nodes[i].name] = graph.nodes[i];
@ -1538,12 +1117,56 @@
};
}
redrawGraph();
// append(result.data.entity)
}
function loadData(name) {
result = sync_request('https://api.ownthink.com/kg/knowledge?entity='+name)
if (JSON.stringify(result.data) == '{}'){
alert("nothing")
return 0
}
fillInfo(result)
// nodeMap = {};
graph = graphList.keyword
// console.log("qiubing2")
console.log(graph)
// console.log(nodeMap)
len = nodeMap.length
for (let i = 0; i < graph.nodes.length; i++) {
nodeMap[graph.nodes[i].name] = graph.nodes[i];
nodeMap[graph.nodes[i].name]['links'] = {};
nodeMap[graph.nodes[i].name]['nodes'] = {};
nodeMap[graph.nodes[i].name]['hasAppend'] = false;
}
for (let i = 0; i < graph.links.length; i++) {
let link = graph.links[i];
if (nodeMap[link.source] !== undefined && nodeMap[link.target] !== undefined) {
nodeMap[link.source].links[link.target] = link;
nodeMap[link.source].nodes[nodeMap[link.target].name] = nodeMap[link.target];
}
}
for (let i = 0; i < graph.nodes.length; i++) {
graph.nodes[i].itemStyle = null;
graph.nodes[i].label = {
normal: {
show: graph.nodes[i].symbolSize > 15
}
};
}
append(name)
}
// 处理点击节点展开
function append(nodeName) {
// 根据nodeName从nodeMap里拿出对应的nodes和links，并append到currentGraph.nodes currentGraph.links
let node = nodeMap[nodeName];
// console.log(node)
// console.log("qiubing3")
// console.log(nodeName)
// console.log(nodeMap)
if (node.hasAppend === true || Object.keys(node.nodes).length === 0 || Object.keys(node.links).length === 0) {
alert("无法继续展开");
return
@ -1577,9 +1200,10 @@
}
// 根据更新后的option重新画图
function redrawGraph() {
// console.log(currentGraph)
optionGraph.series[0].data = Object.values(currentGraph.nodes);
optionGraph.series[0].links = Object.values(currentGraph.links);
console.log(optionGraph);
// console.log(optionGraph);
myChartGraph.setOption(optionGraph);
}
@ -1597,34 +1221,40 @@
layout: 'force',
data: Object.values(currentGraph.nodes),
links: Object.values(currentGraph.links),
categories: [{
name: 'province',
categories: [
{
name: 1,
itemStyle: {
color: '#c23531'
},
},
{
name: 'area',
name: 2,
itemStyle: {
color: '#2f4554'
},
},
{
name: 'city',
name: 3,
itemStyle: {
color: '#61a0a8'
},
},
{
name: 'attribute',
name: 4,
itemStyle: {
color: '#61a0a8'
},
},
{
name: 5,
itemStyle: {
color: '#999ea4'
},
}
],
roam: true,
@ -1657,14 +1287,18 @@
}
}]
};
init();
myChartGraph.on('click', function(params) {
if (params.dataType === "node") {
const node = nodeMap[params.data.name];
if (node.hasAppend === true) {
remove(node.name)
} else {
append(node.name);
// console.log("qiubing")
// console.log(node)
// console.log(nodeMap)
// console.log(node.name)
loadData(node.name);
}
}
});

94
test.html Normal file
View File

@ -0,0 +1,94 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 echarts.js -->
<!-- 这里是加载刚下好的echarts.min.js，注意路径 -->
<script src="echarts.min.js"></script>
<!-- 引入 china.js -->
<script src="china.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.div-a{ position: fixed;width:400px;height:536px;padding:10px;z-index: 1;background-color: rgba(0,0,0,0.3);}
.div-b{ width:400px;height:536px;padding:5px;color:rgb(255, 255, 255);position: relative;}
</style>
</head>
<body>
<div class="div-a">
<div class="div-b" id="mainGraph">知识图谱</div>
</div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100%;height:100vh;"></div>
<script type="text/javascript">
// ajax 对象
// function ajaxObject() {
// var xmlHttp;
// try {
// // Firefox, Opera 8.0+, Safari
// xmlHttp = new XMLHttpRequest();
// }
// catch (e) {
// // Internet Explorer
// try {
// xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
// } catch (e) {
// try {
// xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
// } catch (e) {
// alert("您的浏览器不支持AJAX！");
// return false;
// }
// }
// }
// return xmlHttp;
// }
// // ajax post请求：
// function ajaxPost ( url , data , fnSucceed , fnFail , fnLoading ) {
// var ajax = ajaxObject();
// ajax.open( "post" , url , true );
// ajax.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" );
// ajax.onreadystatechange = function () {
// if( ajax.readyState == 4 ) {
// if( ajax.status == 200 ) {
// fnSucceed( ajax.responseText );
// }
// else {
// fnFail( "HTTP请求错误！错误码："+ajax.status );
// }
// }
// else {
// fnLoading();
// }
// }
// alert(data)
// return ajax.send( data );
// }
// alert(ajaxPost('https://api.ownthink.com/kg/knowledge', JSON.stringify('{\"entity\": \"刘德华\"}')))
function sync_request(url){
//实例化XmlHttpRequest对象
var xhr=new XMLHttpRequest();
//使用GET方式请求指定网址的页面
xhr.open("GET",url,false);
//发送空内容请求
xhr.send(null);
if(xhr.status===200){//200状态码表示正常
result = xhr.responseText
// console.log(JSON.parse(result))
return JSON.parse(result)
}else{
alert("Error occurred:"+xhr.statusText);
}
}
result = sync_request('https://api.ownthink.com/kg/knowledge?entity=刘德华')
console.log(result)
</script>
</body>
</html>