知识图谱可视化vue.js + d3.js
Github
前端 vue.js + d3.js。
需求
上部区域
- 展示所有的概念类别、以及画布内他们的个数
- 展示所有关系类别，以及画布内他们的个数
- 显示所有的概念场景（scenes 字段）、关系场景（source 字段）及画布的个数
- 点击可选中和取消选中，取消选中时，批量隐藏对应的类别
图像区域
- 有按钮可控制缩放
- 整个可视化页面可全屏图像区域内
- 图形化展示概念名、关系名、关系概率（如有）非展示 id；未缩放时，图形展示可看清的大小，不一定展示全局。
- 单击概念，弹出概念选项：
a.固定：固定节点位置，展示其与可见的其他节点的关系；
b.隐藏：隐藏该节点及其关系
c.展开/收起：展开/收起该节点的所有直接关系及关系相连的节点（之前隐藏过也同样需展开） - 位置：
a.已拖动过位置的节点，默认固定在最后停留位置
b.未固定位置的节点，根据整体布局做调整 - 悬停：
a.悬停在节点时，高亮显示视野下该节点、节点关系、关系相连的概念 - 视觉：
a. 不同概念类别的节点，用不同颜色区分（详见设计图）
下部区域
- 展示选中的概念或关系的属性（悬停、单击）
- 概念属性（id、概念类别、其他所有的数据属性等）
- 关系属性（id、关系权重、其他关系属性）
D3.vue
{{ key }}({{ value.length }})
{{ info }}
+
-
reset
mock.json
{
"code": 0,
"message": "",
"data": {
"relations": [{
"id": "2730",
"name": "composed_of",
"semantic_type": "composed_of",
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618832915,
"releaseDate": 1618832915
},
"direction": 0,
"relation_node": {
"id": "2c29f5249cf211ebbc710242c0a8c409",
"name": "外伤史",
"semantic_type": "Symptom",
"labels": ["Concept", "Symptom"],
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618384950,
"releaseDate": 1618384950
}
}
}, {
"id": "2677",
"name": "composed_of",
"semantic_type": "composed_of",
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618803809,
"releaseDate": 1618803809
},
"direction": 1,
"relation_node": {
"id": "8f2d01129c1011eb892ad31672d12132",
"name": "膝关节外伤及手术史",
"semantic_type": "Symptom",
"labels": ["Concept", "Symptom"],
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618293198,
"releaseDate": 1618293198
}
}
}, {
"id": "2649",
"name": "relation",
"semantic_type": "relation",
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618885401,
"releaseDate": 1618885401
},
"direction": 1,
"relation_node": {
"id": "8e8922369c1011eb892ad31672d12132",
"name": "髌骨肌腱炎",
"semantic_type": "BodyStructure",
"labels": ["Concept", "Disease"],
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618293198,
"releaseDate": 1618293198
}
}
}, {
"id": "2672",
"name": "relation",
"semantic_type": "relation",
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618885282,
"releaseDate": 1618885282
},
"direction": 1,
"relation_node": {
"id": "8f0c21689c1011eb892ad31672d12132",
"name": "膝关节脱位",
"semantic_type": "Disease",
"labels": ["Concept", "Disease"],
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618293198,
"releaseDate": 1618293198
}
}
}, {
"id": "2662",
"name": "relation",
"semantic_type": "relation",
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618885172,
"releaseDate": 1618885172
},
"direction": 1,
"relation_node": {
"id": "8eec11d49c1011eb892ad31672d12132",
"name": "股骨髁骨折",
"semantic_type": "Side",
"labels": ["Concept", "Disease"],
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618293198,
"releaseDate": 1618293198
}
}
}, {
"id": "2660",
"name": "relation",
"semantic_type": "relation",
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618885118,
"releaseDate": 1618885118
},
"direction": 1,
"relation_node": {
"id": "8ed52bcc9c1011eb892ad31672d12132",
"name": "膝关节内侧副韧带损伤",
"semantic_type": "Disease",
"labels": ["Concept", "Disease"],
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618293198,
"releaseDate": 1618293198
}
}
}, {
"id": "2636",
"name": "relation",
"semantic_type": "relation",
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618884966,
"releaseDate": 1618884966
},
"direction": 1,
"relation_node": {
"id": "8ebdb2d09c1011eb892ad31672d12132",
"name": "膝髌韧带裂（扭）伤",
"semantic_type": "Disease",
"labels": ["Concept", "Disease"],
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618293198,
"releaseDate": 1618293198
}
}
}, {
"id": "2621",
"name": "relation",
"semantic_type": "relation",
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618883252,
"releaseDate": 1618883252
},
"direction": 1,
"relation_node": {
"id": "84417f449c1011eb892ad31672d12132",
"name": "剥脱性骨软骨炎",
"semantic_type": "Disease",
"labels": ["Concept", "Disease"],
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618293198,
"releaseDate": 1618293198
}
}
}, {
"id": "2553",
"name": "relation",
"semantic_type": "relation",
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618886711,
"releaseDate": 1618886711
},
"direction": 1,
"relation_node": {
"id": "8ef701fc9c1011eb892ad31672d12132",
"name": "髌骨脱位",
"semantic_type": "BetterAndWorse",
"labels": ["Concept", "Disease"],
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618293198,
"releaseDate": 1618293198
}
}
}, {
"id": "2538",
"name": "relation",
"semantic_type": "relation",
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618886139,
"releaseDate": 1618886139
},
"direction": 1,
"relation_node": {
"id": "8edf38889c1011eb892ad31672d12132",
"name": "膝关节游离体",
"semantic_type": "Disease",
"labels": ["Concept", "Disease"],
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618293198,
"releaseDate": 1618293198
}
}
}, {
"id": "2531",
"name": "relation",
"semantic_type": "relation",
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618886026,
"releaseDate": 1618886026
},
"direction": 1,
"relation_node": {
"id": "8eb96dc49c1011eb892ad31672d12132",
"name": "髌骨软骨软化",
"semantic_type": "Relieve",
"labels": ["Concept", "Disease"],
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618293198,
"releaseDate": 1618293198
}
}
}, {
"id": "2527",
"name": "relation",
"semantic_type": "relation",
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618885900,
"releaseDate": 1618885900
},
"direction": 1,
"relation_node": {
"id": "84254cac9c1011eb892ad31672d12132",
"name": "半月板囊肿",
"semantic_type": "Disease",
"labels": ["Concept", "Disease"],
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618293198,
"releaseDate": 1618293198
}
}
}, {
"id": "2582",
"name": "relation",
"semantic_type": "relation",
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618803809,
"releaseDate": 1618803809
},
"direction": 1,
"relation_node": {
"id": "8ed7c3509c1011eb892ad31672d12132",
"name": "闭合型胫骨平台骨折",
"semantic_type": "Disease",
"labels": ["Concept", "Disease"],
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618293198,
"releaseDate": 1618293198
}
}
}, {
"id": "2552",
"name": "relation",
"semantic_type": "relation",
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618803809,
"releaseDate": 1618803809
},
"direction": 1,
"relation_node": {
"id": "8401f0d69c1011eb892ad31672d12132",
"name": "半月板损伤",
"semantic_type": "Disease",
"labels": ["Concept", "Disease"],
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618293198,
"releaseDate": 1618293198
}
}
}, {
"id": "5534",
"name": "relation",
"semantic_type": "relation",
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618882945,
"releaseDate": 1618882945
},
"direction": 1,
"relation_node": {
"id": "8ee67ed69c1011eb892ad31672d12132",
"name": "髌骨骨折",
"semantic_type": "Action",
"labels": ["Concept", "Disease"],
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618293198,
"releaseDate": 1618293198
}
}
}, {
"id": "2533",
"name": "relation",
"semantic_type": "relation",
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618886473,
"releaseDate": 1618886473
},
"direction": 1,
"relation_node": {
"id": "8ee6f92e9c1011eb892ad31672d12132",
"name": "膝关节或韧带的脱位、劳损或扭伤",
"semantic_type": "Disease",
"labels": ["Concept", "Disease"],
"properties": {
"scenes": "allinmd",
"status": 1,
"lastModified": 1618293198,
"releaseDate": 1618293198
}
}
}]
}
}