本文通过一个完整的HTML代码示例，展示了如何使用D3.js库创建力导向图，并实现节点间的最短路径搜索功能。利用D3.js的图形绘制能力和图论算法，可以有效地可视化复杂网络结构并找出节点间最短路径。
直接上完整html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图的最短路径搜索</title>
</head>
<body>
<svg width="800"
height="600"></svg>
<script src="https://d3js.org/d3.v5.js"></script>
<script type="text/javascript">
function Graph(nodes) {//图类
this.vertices = nodes.length;//结点数
this.edges = 0;//边数
this.adj = [];//数组存放顶点数量
this.edgeTo = [];//存放从一个顶点到下一个顶点的所有边
for (var i = 0; i < this.vertices; i++) {
this.adj['node' + nodes[i]['@id']] = [];//子数组存储相邻顶点
}
this.addEdge = addEdge;//添加边
this.showGraph = showGraph;//显示图
this.dfs = dfs;//深度优先搜索
this.bfs = bfs;//广度优先搜索
this.pathTo = pathTo;
this.hashPathTo = hashPathTo;
this.marked = [];//标识位数组
for (var i = 0; i < this.vertices; i++) {//给所有结点添加未访问过的标识位
this.marked['node' + nodes[i]['@id']] = false;
}
}
function addEdge(v,w) {//添加边
this.adj[v].push(w);//将w添加到v的相邻顶点列表
this.adj[w].push(v);//将v添加到w的相邻顶点列表
this.edges++;//边数加一
}
function showGraph() {//显示图
for (var i = 0; i < this.vertices; i++) {
document.write(nodes[i] + "->");
for (var j = 0; j < this.vertices; j++) {
// console.log(this.adj[nodes[i]][nodes[j]]);
if (this.adj[nodes[i]][nodes[j]] != undefined) {//显示和该结点相邻的结点
document.write(this.adj[nodes[i]][nodes[j]] + " ");
}
}
document.write("");
}
}
function dfs(v) {//深度优先搜索
this.marked[v] = true;//将标识位设为已访问
if (this.adj[v] != null) {//如果有相邻节点
document.write('访问节点：' + v + '');
}
var len = this.adj[v].length;
for (var i = 0; i < len; i++) {
var w = this.adj[v];//将所选节点对应路径一条条搜索下去
for (var j = 0; j < w.length; j++)
if (!this.marked[w[j]]) {//对应一个路径一次搜索到底
this.dfs(w[j]);
}
}
}
function bfs(s) {//广度优先搜索
for (var i = 0; i < this.vertices; i++) {//由于先进行深度优先搜索，所以这里要将标识位重置
this.marked['node' + nodes[i]['@id']] = false;
}
var queue = [];
this.marked['node' + s] = true;
queue.push('node' + s);
while (queue.length > 0) {
var v = queue.shift();
if (v != undefined) {
}
for (var i = 0; i < this.adj[v].length; i++) {
var w = this.adj[v];//找到所选节点的相邻子列表
for (var j = 0; j < w.length; j++) {
if (!this.marked[w[j]]) {
this.edgeTo[w[j]] = v;//将对应节点存入边数组
this.marked[w[j]] = true;//依次访问其相邻子列表
queue.push(w[j]);//将子列表推送入队列
}
}
}
}
}
function pathTo(source,v) {//寻找最短路径
var source = 'node' + source;
var path = [];
for (var i = v; i != source; i = this.edgeTo[i]) {//在相邻边数组中寻找
path.push(i);
}
path.push(source);//将起始节点加进最短路径数组
return path;
}
function hashPathTo(v) {
return this.marked[v];
}
//实验
let nodes = [{ "@id": 2553989,"@type": ["Event","Thing","CompanyInfoUpdateEvent","Event"],"date": "2018-05-16","changeCategory": "经营范围变更（含业务范围变更）变更","textAfter": "药品零售；医疗器械经营：第二类、三类医疗器械；食品经营：预包装食品、保健食品；销售：计生用品、日用百货、化妆品、消杀用品、保健用品。（依法须经批准的项目，经相关部门批准后方可开展经营活动）***","kgid": "c390d673e3ea88e1356c17a5a7313462876dcb5c88c6a6e4a26f63b814033e37","pageRankScore": "0.15","name": "晋中市金华颐大药房潇河湾店公司信息变更事件","dateModified": "2019-05-14T15:02:37","statedIn": "UPDATEEVENT","textBefore": "零售：中药饮片、中成药、化学药制剂、抗生素、生化药品、生物制剂（除疫苗）、二类、三类医疗器械、预包装食品、保健食品、计生用品、日用百货、化妆品、消杀用品、保健用品。（依法须经批准的项目，经相关部门批准后方可开展经营活动）**","entityScore": "15.0","graphId": "cmb_research","dataSource": "工商局","id": 2553989,"flag": true },{ "@id": 10813319,"@type": ["AdministrativeRegion","Thing","Place","AdministrativeRegion","Province"],"kgid": "3daf0c458621b2a757aa624745b6a2ffe841349757a1fe15d04623c373723f7b","pageRankScore": "2463.734055834128","name": "山西省","dateModified": "2019-05-14T15:07:20","statedIn": "BASEINFO,LISTEDCOMPANY","entityScore": "246373.4055834128","graphId": "cmb_research","dataSource": "工商局","id": 10813319,"flag": true },{ "@id": 603725,"@type": ["Person","Thing","Person"],"kgid": "52bdbcd42b89758ec912cdaa85b6792c9d8d605927f1afd73e9cf71bacb4ec4b","pageRankScore": "0.44537499999999997","name": "苏玲","dateModified": "2019-05-14T15:07:34","statedIn": "BASEINFO","entityScore": "44.537499999999994","graphId": "cmb_research","dataSource": "工商局","id": 603725,"flag": true },{ "@id": 4550481,"@type": ["Event","Thing","CompanyInfoUpdateEvent","Event"],"date": "2014-12-30","changeCategory": "期限变更（经营期限、营业期限、驻在期限等变更）变更","textAfter": "{2014-07-02,2019-05-01}","kgid": "482edc3c67f3032cadb97180c17cac9c4985acf8a5093e127a1bc512bcb048fe","pageRankScore": "0.15","name": "晋中市金华颐大药房潇河湾店公司信息变更事件","dateModified": "2019-05-14T15:02:37","statedIn": "UPDATEEVENT","textBefore": "{2014-07-02,2015-01-08}","entityScore": "15.0","graphId": "cmb_research","dataSource": "工商局","id": 4550481,"flag": true },{ "@id": 71641,"@type": ["Event","Thing","CompanyInfoUpdateEvent","Event"],"date": "2018-05-16","changeCategory": "负责人变更（法定代表人、负责人、首席代表、合伙事务执行人等变更）变更","textAfter": "苏玲","kgid": "52cc0bdd06b313400f1c860701829af8521187b2917f0b92f9de3ae5c607aba6","pageRankScore": "0.15","name": "晋中市金华颐大药房潇河湾店公司信息变更事件","dateModified": "2019-05-14T15:02:37","statedIn": "UPDATEEVENT","textBefore": "张倩","entityScore": "15.0","graphId": "cmb_research","dataSource": "工商局","id": 71641,"flag": true },{ "@id": 10291269,"@type": ["Event","Thing","CompanyInfoUpdateEvent","Event"],"date": "2018-05-16","changeCategory": "期限变更（经营期限、营业期限、驻在期限等变更）变更","textAfter": "无","kgid": "43fea921f6af86eb04e1e1551950e60e5540e77131606dbab94ff4875975324f","pageRankScore": "0.15","name": "晋中市金华颐大药房潇河湾店公司信息变更事件","dateModified": "2019-05-14T15:02:37","statedIn": "UPDATEEVENT","textBefore": "2019-05-01","entityScore": "15.0","graphId": "cmb_research","dataSource": "工商局","id": 10291269,"flag": true },{ "@id": 4782497,"@type": ["Organization","Thing","Company","Organization"],"foundingDate": "2014-07-02","unifiedSocialCreditCode": "91140702396355827D","saicRegistrationDate": "2018-05-16","kgid": "e2515437fb6cc24ea247097d418da7dff86c9de87c1afe97fa30a04b93842549","saicRegistrationLocation": "山西省晋中市榆次区锦纶南路潇河湾小区16号楼04号","saicRegistrationStatus": "存续","dateModified": "2019-05-14T15:07:34","statedIn": "BASEINFO,UPDATEEVENT,PERMIT_GSP","saicRegistrationAgency": "山西省晋中市工商行政管理局榆次区分局","validFrom": "2014-07-02","scopeOfBusiness": "药品零售；医疗器械经营:第
最低0.47元/天 解锁文章
460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
