diff --git a/demo.html b/demo.html
index 9852cca..507acd7 100644
--- a/demo.html
+++ b/demo.html
@@ -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);
+ 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)
+ }
-// 知识图谱
- 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,
- }
-
- ],
- "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);
}
}
});
diff --git a/test.html b/test.html
new file mode 100644
index 0000000..8060366
--- /dev/null
+++ b/test.html
@@ -0,0 +1,94 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file