一個簡陋的個人小項目,也是個人第一個真正意義上的獨立項目——Graph
由來
我最早接觸到圖這個概念是在大二的離散數學當中圖論相關的內容,當時是以著名的哥尼斯堡七橋問題引出圖論的概念,現在依然記憶猶新(不過只是記得這個名字,具體的解題思路我重新溫習了一下才想起來),當時也提出了求最短路徑的迪傑斯特拉算法,不過沒有用編程語言具體實現。
之後在數據結構的學習中,又出現了圖的相關知識,提出了在計算機中存儲圖的幾種方式,我們學校的課程中學習的是鄰接表和鄰接矩陣,同時也用編程語言實現了具體的算法。
離散數學中的圖用幾何圖形表示,清晰明了,但實現算法時步驟不清晰;鄰接矩陣和鄰接表適合實現算法,但可視化效果不好,只能用字符串輸出。那麽能不能寫一個小項目,既能實現算法,又能用可視化較好的形式顯示出來呢?之前其他人可能也寫過同樣功能的項目,但這個想法是我自己獨立提出的,而且我有一套自己獨特的實現方法,至於實現方法,請看下文詳細講解。
DOT語言
DOT語言是貝爾實驗室發明的繪圖語言,它可以非常方便地繪制出數學概念中的圖,包括有向圖和無向圖,可以在頂點內添加信息,也可以在邊上添加信息,還可以設置不同的頂點形狀和邊的形狀等等功能,它的文檔在此:https://graphviz.gitlab.io/_pages/doc/info/lang.html
下面我給出一個DOT語言的使用示例,代碼和繪圖效果如下:
graph g{
a--b--c,d--a
}
我是在使用Markdown Preview Enhanced插件的過程中了解到了DOT語言。在Graph項目中,DOT語言是非常重要的一環,它就可以實現將文本到可視化圖形的轉換
DOT語言最早是在桌面端的一個應用程序叫做Graphviz中實現的,不過現在已經有人在瀏覽器端用一個名為Viz.js的工具來實現了,也正符合了那句話:“能用 js 實現的功能,最終一定會用 js 實現”。Viz.js也是這個項目主要的依賴文件
Graph項目目前實現的功能
- 輸入鄰接矩陣生成無向圖
- 輸入鄰接矩陣生成有向圖
- 輸入鄰接表生成無向圖
- 輸入鄰接表生成有向圖
- 輸入鄰接矩陣、開始點和結束點的信息,計算最短路徑並生成可視化結果
- 輸入鄰接表、開始點和結束點的信息,計算最短路徑並生成可視化結果
Graph項目的簡要工作流程
Graph項目的Github地址
https://github.com/aopstudio/Graph
生成的HTML文件的位置
- 完整的有向圖或無向圖:D:/graph.html
- 要求的最短路徑示意圖:D:/shortestPath.html
主函數代碼分析和使用效果
目前我還沒有寫輸入模塊,只能在源代碼中給定數據來生成圖。在源代碼中給出五個頂點,
String[] nodes= {"北京","上海","臺北","泰州","寧波"};
初始化鄰接矩陣的邊矩陣,再給定邊的權值
int[][] m=new int[nodes.length][nodes.length];
m[0][1]=1213;
m[1][4]=200;
m[1][2]=900;
m[4][2]=600;
m[0][3]=1200;
m[3][4]=400;
將存儲邊信息的m和存儲頂點信息的node包裝成我自定義的數據結構MatrixGraph
MatrixGraph mg=new MatrixGraph(m,nodes);
調用MatrixGraph的generateDG方法生成完整圖的DOT語言代碼,調用shortestPath生成最短路徑示意圖的DOT語言代碼,這裏輸入的參數0和4代表頂點編號,0是指北京,4是指寧波,也就是求從北京到寧波的最短路徑
String graph=mg.generateDG();
String shortestPath=mg.printShortestPath(0, 4);
再將DOT語言代碼嵌入到HTML代碼中
String html1=GenerateHTML.Generate(graph);
String html2=GenerateHTML.Generate(shortestPath);
最後將HTML代碼寫入文件
WriteFile.write(html1);
WriteFile.writeShortest(html2);
生成的效果如下:
- 完整圖
- 最短路徑示意圖
一個簡陋的個人小項目,也是個人第一個真正意義上的獨立項目——Graph