基于Unity3D的數(shù)據(jù)結(jié)構(gòu)算法交互式可視化平臺

方子寧 曹正昊 孫瑞 郭清桐 朱玉晟

摘? 要：文章重點(diǎn)研究數(shù)據(jù)結(jié)構(gòu)算法交互式的可視化平臺。由于數(shù)據(jù)結(jié)構(gòu)的難點(diǎn)就是如何形象化其抽象的邏輯說明，并培養(yǎng)出完善的思維體系。團(tuán)隊(duì)致力于搭建交互式模型，利用Vue搭建網(wǎng)站，通過Unity3D這款軟件編寫算法底層邏輯代碼，并且借助DoTweening等插件，達(dá)到算法動(dòng)態(tài)的展示，通過Unity3D打包成WebGL和前端Vue交互，實(shí)現(xiàn)了數(shù)據(jù)結(jié)構(gòu)算法的可視化互動(dòng)學(xué)習(xí)。

關(guān)鍵詞：交互式模型；Unity3D；Vue；數(shù)據(jù)結(jié)構(gòu)算法；可視化演示

中圖分類號：TP311.5? 文獻(xiàn)標(biāo)識碼：A? 文章編號：2096-4706（2023）15-0006-06

Interactive Visualization Platform for Data Structure Algorithms Based on Unity3D

FANG Zining， CAO Zhenghao， SUN Rui， GUO Qingtong， ZHU Yusheng

（School of Electronics and Computer Engineering， Southeast University Chengxian College， Nanjing? 210088， China）

Abstract： This paper focuses on researching an interactive visualization platform for data structure algorithms. The difficulty of data structure is how to visualize its abstract logical explanation and cultivate a sound thinking system. The team is committed to building interactive models， using Vue to build websites， using Unity3D software to write underlying logic code of algorithms， and utilizing pluggable units such as DoTweening to achieve dynamic display of algorithms. Through packaging Unity3D into webgl and interacting with front-end Vue， visualization and interactive learning of data structure algorithms are achieved.

Keywords： interactive model; Unity3D; Vue; data structure algorithm; visual demonstration

0? 引? 言

數(shù)據(jù)結(jié)構(gòu)算法學(xué)習(xí)的一大難點(diǎn)[1]就是如何形象化其抽象的邏輯說明，并培養(yǎng)出一套完善的思維體系框架，而該過程是十分枯燥的。對算法的理解學(xué)習(xí)要求學(xué)習(xí)者不僅有深厚的數(shù)學(xué)功底，還要有良好的邏輯思維能力才能夠理解書本上大量抽象的算法公式和枯燥煩瑣的代碼運(yùn)算過程。而就目前的情況而言，課堂上教師們的授課大多也是采用口頭講述結(jié)合書本文字，輔以筆頭繪圖來進(jìn)行授課，更遑論部分自學(xué)者只能通過鉆研代碼來理解算法，可見傳統(tǒng)的學(xué)習(xí)方式對初學(xué)者來說并不是非常便捷。因此，現(xiàn)階段很需要一個(gè)將數(shù)據(jù)結(jié)構(gòu)算法動(dòng)態(tài)可視化的平臺，通過實(shí)例帶入和交互式可視化演示技術(shù)[2]，來幫助用戶用更加生動(dòng)形象的方式來理解數(shù)據(jù)結(jié)構(gòu)和其所擁有的各項(xiàng)算法。

在經(jīng)過團(tuán)隊(duì)一系列的研究和搜索后，發(fā)現(xiàn)目前國內(nèi)外有不少對于算法可視化的網(wǎng)站[3]和輔助工具，比較熟知的有VisuAlgo和Data Structure Visualizations[4]等，而這每個(gè)網(wǎng)站也各自有自己的獨(dú)特之，例如Data Structure Visualizations網(wǎng)站特點(diǎn)為過程可以自己控制，VisuAlgo則是加入了文字講解和復(fù)雜度的備注。但目前所使用的可視化網(wǎng)站[5]，大多都是2D的過程展示，較少有通過3D模型來進(jìn)行演示的平臺，且交互性也不夠強(qiáng)。同時(shí)由于不是專門用于學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)的工具，因此這些網(wǎng)站包含了較多其他邏輯類的算法，而有很多數(shù)據(jù)結(jié)構(gòu)特有的算法沒有得到展示。

在一系列權(quán)衡之后，項(xiàng)目組成員決定采用Unity平臺，在基于在校期間學(xué)習(xí)的各類算法的學(xué)習(xí)基礎(chǔ)上，再加上網(wǎng)站的制作和運(yùn)行技術(shù)，來搭建一個(gè)基于Unity3D的數(shù)據(jù)結(jié)構(gòu)算法交互式可視化網(wǎng)站。在充分研究了項(xiàng)目可行性后，團(tuán)隊(duì)成員進(jìn)行了各項(xiàng)分析并逐漸完成了平臺的設(shè)計(jì)與交互式可行性分析。Unity3D是一項(xiàng)對于動(dòng)態(tài)模型搭建非常便捷的平臺，但是還需要一個(gè)媒介將unity3D的動(dòng)態(tài)演示給展現(xiàn)出來，因此在經(jīng)過一系列了解后，團(tuán)隊(duì)選用了現(xiàn)在常用的網(wǎng)頁制作工具Vue。

1? 理論基礎(chǔ)

1.1? 開發(fā)工具介紹

1.1.1? Unity3D

Unity是由Unity Technologies公司開發(fā)的跨平臺專業(yè)游戲引擎，也是實(shí)時(shí)互動(dòng)內(nèi)容創(chuàng)作和運(yùn)營平臺，其功能涵蓋了包括游戲開發(fā)、美術(shù)、建筑、汽車設(shè)計(jì)、影視在內(nèi)的多個(gè)領(lǐng)域。Unity平臺提供一整套完善的軟件解決方案，可用于創(chuàng)作、運(yùn)營和變現(xiàn)任何實(shí)時(shí)互動(dòng)的2D和3D內(nèi)容，支持平臺包括手機(jī)、平板電腦、PC、游戲主機(jī)、增強(qiáng)現(xiàn)實(shí)和虛擬現(xiàn)實(shí)設(shè)備。

Unity的3D[6]開發(fā)平臺是行業(yè)內(nèi)領(lǐng)先的，Unity引擎的靈活性和實(shí)時(shí)互動(dòng)性，為創(chuàng)作者提供了極大的便利，完善的技術(shù)和豐富的個(gè)性化功能可以滿足開發(fā)者在使用時(shí)幾乎所有的要求。同時(shí)Unity也密切關(guān)注著教育行業(yè)的發(fā)展，為學(xué)生使用Unity平臺時(shí)提供了較多的便捷[7]。Unity提供易用實(shí)時(shí)平臺，開發(fā)者可以在平臺上構(gòu)建各種3D互動(dòng)模型。

1.1.2? Vue

Vue是一種漸進(jìn)式的Web前端開發(fā)框架[8]，它基于標(biāo)準(zhǔn)HTML、CSS和JavaScript構(gòu)建，提供容易上手的API和一流的文檔。它擁有豐富的、可漸進(jìn)式集成的生態(tài)系統(tǒng)，可以根據(jù)應(yīng)用規(guī)模在庫和框架間切換自如。Vue采用自底向上的增量開發(fā)設(shè)計(jì)，且它的核心庫只關(guān)注視圖層，非常容易學(xué)習(xí)，并且很易于與其他庫或已有項(xiàng)目整合。

Vue出色的性能和豐富的場景對于本團(tuán)隊(duì)這種初學(xué)開發(fā)者來說實(shí)用性高[9]，上手度快。并且根據(jù)團(tuán)隊(duì)成員所查到的文獻(xiàn)資料可知，Unity平臺可以和Vue進(jìn)行交互式的聯(lián)動(dòng)，實(shí)現(xiàn)兩者數(shù)據(jù)的傳參，通過這個(gè)特性，可以將這個(gè)平臺的功能進(jìn)一步完善。

1.2? 設(shè)計(jì)思路

在進(jìn)行項(xiàng)目統(tǒng)籌設(shè)計(jì)時(shí)，團(tuán)隊(duì)采用了漸增模型來設(shè)計(jì)，將網(wǎng)站所需要的一系列組成部分拆分為每項(xiàng)單獨(dú)的增量構(gòu)件，每個(gè)增量構(gòu)件都是項(xiàng)目系統(tǒng)的一個(gè)子集，能夠完成特定的功能。從最初進(jìn)行網(wǎng)站的頁面設(shè)計(jì)，而后在Vue搭建時(shí)進(jìn)行算法展示窗口設(shè)計(jì)，完成這一部分時(shí)團(tuán)隊(duì)成員又開始研究窗口內(nèi)動(dòng)態(tài)模型所需要的交互部分，以此類推，逐步完善項(xiàng)目的網(wǎng)站系統(tǒng)，本系統(tǒng)的功能結(jié)構(gòu)圖如圖1所示。

在設(shè)計(jì)網(wǎng)站時(shí)，團(tuán)隊(duì)初步構(gòu)思了如下幾個(gè)組成頁面，包括主頁的算法分類維護(hù)，算法展示和算法查找。其中，主頁面會呈現(xiàn)該平臺所有的算法并進(jìn)行歸類，用戶可以根據(jù)自己的需求下拉找到想看的算法或者使用搜索欄進(jìn)行關(guān)鍵字搜索，如果沒有對應(yīng)的算法系統(tǒng)會讓用戶重新輸入，同時(shí)，用戶輸入的關(guān)鍵字，系統(tǒng)也會自動(dòng)補(bǔ)齊相關(guān)算法并顯示在搜索框的下方供用戶選擇。

當(dāng)用戶點(diǎn)擊對應(yīng)的算法圖片后，會彈出該算法的展示界面，此時(shí)的界面共有三個(gè)部分，左邊為Unity3D平臺的動(dòng)態(tài)實(shí)例展示窗口，右側(cè)上半部分為該算法的文字介紹部分，下面則是用C++語言展示出來的主要邏輯代碼。同時(shí)在展示實(shí)例的下方會有交互輸入窗口，用戶可以輸入自定義數(shù)據(jù)，而后上方的動(dòng)態(tài)實(shí)例展示窗口會根據(jù)數(shù)據(jù)生成對應(yīng)的模型。模型建立好后用戶可以點(diǎn)擊對應(yīng)的開始和暫停按鈕，以觀察模型的變化，流程如圖2所示。

2? 需求分析

數(shù)據(jù)結(jié)構(gòu)算法[10]是計(jì)算機(jī)的中心思想課程，讓程序員更好地了解程序之間的結(jié)構(gòu)關(guān)系，因此結(jié)構(gòu)的可視化非常重要。更重要的是要讓人們對這門課的學(xué)習(xí)有更加輕松的體驗(yàn)，因此選取合適的3D模型進(jìn)行交互式可視化演示就極其重要。本網(wǎng)站不僅適用于教師進(jìn)行授課使用，也適用于希望初步自學(xué)數(shù)據(jù)結(jié)構(gòu)的學(xué)生或者工作者，在對某一算法概念不清晰時(shí)，可以通過對本網(wǎng)站的使用加深自己的概念理解，模型的可交互性也增加了用戶的使用體驗(yàn)。

該平臺基于其他網(wǎng)站的優(yōu)點(diǎn)，結(jié)合3D模型的具體化演示，通過搭建可交互式模型，網(wǎng)站實(shí)現(xiàn)算法如下：

1）線性表：順序表和鏈表的基本操作，循環(huán)鏈表，雙向鏈表。

2）棧和隊(duì)列的基本操作，循環(huán)隊(duì)列。

3）字符串的模式匹配。

4）矩陣的壓縮存儲和廣義表的存儲。

5）樹：線索二叉樹，前中后遍歷二叉樹，赫夫曼樹。

6）圖：DFS，BFS，普利姆算法，克魯斯卡爾算法，拓?fù)渑判颍P(guān)鍵路徑，最短路徑。

7）查找：靜態(tài)查找：順序查找，折半查找，索引順序查找。

8）動(dòng)態(tài)查找：二叉排序樹，二叉平衡樹，B-樹，哈希表。

9）排序：直接插入，希爾排序，直接選擇，堆排序，冒泡排序，快速排序，歸并排序，基數(shù)排序。

3? 系統(tǒng)實(shí)現(xiàn)

3.1? Unity3D模型搭建

在經(jīng)過研究后，為保證組內(nèi)各位成員所制作的工程不會產(chǎn)生版本誤差導(dǎo)致無法互通，團(tuán)隊(duì)在Unity Hub中選擇了同一版本2020.1.01f1來進(jìn)行制作，而后通過多種渠道的自主學(xué)習(xí)，成員們初步了解了該如何使用Unity中的自帶模型來完成初步的動(dòng)態(tài)建模。

但由于大多數(shù)的教程都著重于如何使用Unity來設(shè)計(jì)一個(gè)游戲，因此都比較看終于動(dòng)態(tài)模型的導(dǎo)入與動(dòng)作的產(chǎn)生。而動(dòng)作控制與本平臺所需要的算法可視化并無太多關(guān)聯(lián)，因此成員們在學(xué)習(xí)時(shí)主要選擇通過講解視頻來了解并學(xué)習(xí)Unity中C#語言的應(yīng)用和掌握，考慮重心在物體的材質(zhì)、移動(dòng)、旋轉(zhuǎn)及多物體間的聯(lián)動(dòng)反應(yīng)。在完成常用功能的學(xué)習(xí)后看，團(tuán)隊(duì)的研究重點(diǎn)在Unity模型的與Vue輸入數(shù)據(jù)的交互性上。

為了實(shí)現(xiàn)交互式功能，團(tuán)隊(duì)并沒有直接將物體排布在展示窗口中間，而是設(shè)置了預(yù)設(shè)體，這樣可以讓物體按照用戶輸入的數(shù)據(jù)自動(dòng)生成對應(yīng)的物體在窗口中。

3.2? Vue搭建

負(fù)責(zé)界面設(shè)計(jì)的成員照著設(shè)計(jì)時(shí)所畫的界面設(shè)計(jì)圖，如圖3所示，插入對應(yīng)的標(biāo)簽、文本框和圖片插件，網(wǎng)頁的圖片也已經(jīng)設(shè)置了跳轉(zhuǎn)鏈接，用戶點(diǎn)擊后就可以進(jìn)入對應(yīng)分類詳細(xì)查看該類別中的算法，再點(diǎn)擊單個(gè)算法的圖片縮略圖就可以進(jìn)入該算法的動(dòng)態(tài)模型演示頁面。進(jìn)入頁面后，網(wǎng)頁右半部分設(shè)置了文字注釋部分以及代碼注釋部分，結(jié)合所用的動(dòng)態(tài)模型，可以更直觀地讓大家理解這個(gè)算法。同時(shí)，手動(dòng)輸入數(shù)據(jù)進(jìn)行交互式演示可以讓抽象的算法變得具體。該網(wǎng)頁在演示中也設(shè)置了暫停與開始按鈕，方便用戶暫停演示時(shí)可以查看該步驟所對應(yīng)的代碼。

3.3? 服務(wù)器搭建

在比較了網(wǎng)絡(luò)上各類云服務(wù)器的優(yōu)劣性后，結(jié)合該項(xiàng)目的運(yùn)行內(nèi)存大小，團(tuán)隊(duì)成員選擇了阿里云服務(wù)器。阿里云是創(chuàng)立于2009年的全球領(lǐng)先的云計(jì)算及人工智能科技公司，致力于以在線公共服務(wù)的方式，提供安全可靠的計(jì)算和數(shù)據(jù)處理能力。阿里云服務(wù)器是簡單高效、安全可靠、處理能力彈性伸縮的計(jì)算服務(wù)器，常適用于開發(fā)者將完成的個(gè)人網(wǎng)站部署到云服務(wù)器上，較為輕松便捷。

在購買了云服務(wù)器之后，負(fù)責(zé)服務(wù)器搭建的成員按照操作流程設(shè)置好了端口，再設(shè)置好管理員的賬號密碼等內(nèi)容，就可以開始上傳文件，而后進(jìn)行環(huán)境變量的配置。配置完成后就可以開始上傳網(wǎng)站的源碼，再部署Web項(xiàng)目包，最后經(jīng)過調(diào)試就可將該平臺成功放置在云服務(wù)器上。

3.4? 功能實(shí)現(xiàn)

打開鏈接跳轉(zhuǎn)后，會首先進(jìn)入該網(wǎng)站的首頁。經(jīng)過討論，本團(tuán)隊(duì)將首頁設(shè)計(jì)成了算法縮略圖加上簡易文字說明的組合，將所有算法分為幾類，而后進(jìn)入每個(gè)分類可以再看到該類別中的幾種詳細(xì)算法首頁Vue界面與算法分類Vue界面如圖4、圖5所示。

這里就用冒泡算法的實(shí)現(xiàn)過程來進(jìn)行簡單介紹。冒泡排序是簡單的排序算法，它的基本原理就是比較相鄰的元素，如果第一個(gè)比第二個(gè)大，就交換他們兩個(gè)。對每一對相鄰元素作同樣的工作，從開始第一對到結(jié)尾的最后一對。這個(gè)比較的步驟要不停地重復(fù)，直到?jīng)]有任何一對數(shù)字需要比較，而最后完成的數(shù)列應(yīng)是按照從左到右從小到大的順序排列整齊的。

所以在本模型中，團(tuán)隊(duì)成員采用了柱體來表示數(shù)字大小的不同，將每個(gè)元素比較大小轉(zhuǎn)換為多個(gè)柱體比較高度的模型，更為直觀。

為了做到交互式，通過在Vue的文本輸入框輸入數(shù)字，在進(jìn)行數(shù)據(jù)傳參傳遞到Unity中，這樣就可以讓每個(gè)柱體根據(jù)輸入數(shù)據(jù)的不同改變自身的高低。而后通過對底層邏輯的編寫和位置轉(zhuǎn)換函數(shù)的研究，成功實(shí)現(xiàn)了點(diǎn)擊界面Start按鈕即可讓生成的柱體依照冒泡排序的邏輯順序開始自動(dòng)交換位置的，同時(shí)會生成一個(gè)對應(yīng)的有序數(shù)列。

在實(shí)現(xiàn)動(dòng)態(tài)變化的同時(shí)，模型變換中還結(jié)合了Unity3D中物體材質(zhì)的改變，讓柱體在位置轉(zhuǎn)換時(shí)可以實(shí)現(xiàn)顏色的轉(zhuǎn)變，將每次需要交換的兩個(gè)物體用亮色標(biāo)記，交換完成后回到原來的顏色，而后過程都重復(fù)這一步驟，這樣使得整個(gè)流程更加完善更加清晰。

3.5? 代碼思路闡述

3.5.1? Unity3D系統(tǒng)

算法演示動(dòng)態(tài)模型的搭建步驟大致相同，這里選取冒泡算法的制作過程來進(jìn)行簡單闡述。首先搭建好預(yù)設(shè)體的模型并分類命名，例如Obj[0]為柱體，Obj1[0]為文本等，第二步設(shè)置類型轉(zhuǎn)換函數(shù)numberString將文本轉(zhuǎn)換為數(shù)字，并設(shè)置數(shù)字的有效讀取范圍為0～9。其次這是數(shù)據(jù)類型轉(zhuǎn)換函數(shù)將轉(zhuǎn)換后的數(shù)字設(shè)置為int型。數(shù)字讀取部分就基本完成了。

然后是預(yù)設(shè)體的模型部分。第一步先確認(rèn)在鏡頭中三維坐標(biāo)，第二步設(shè)置參數(shù)x，x是獲取到的數(shù)字進(jìn)行處理后得到的數(shù)字。設(shè)GetComponent函數(shù)中l(wèi)ocalScale參數(shù)來實(shí)現(xiàn)自身的縮放，得到的新物體縮放比例為（1，numberInt，1），設(shè)置position參數(shù)將預(yù)設(shè)體的位置移動(dòng)到鏡頭中合適的地方。物體移動(dòng)至對英文之后，再次使用GetComponent函數(shù)中的text參數(shù)部分將物體對應(yīng)的數(shù)字文本進(jìn)行顯示，并使用position參數(shù)移動(dòng)至該物體前方便于觀察。至此模型的生成部分就基本完成。

第三部分則是物體的動(dòng)態(tài)部分，主要包括物體的位置移動(dòng)，物體的材質(zhì)變化（當(dāng)前進(jìn)行移動(dòng)的物體會改變顏色來重點(diǎn)說明），以及文本對應(yīng)的下挪。當(dāng)前物體移動(dòng)完成后，執(zhí)行waitForSecond函數(shù)來等待，而后在執(zhí)行下一個(gè)物體的移動(dòng)。此處團(tuán)隊(duì)選用if函數(shù)來實(shí)現(xiàn)物體的動(dòng)態(tài)演示，通過大小的自動(dòng)比對來實(shí)現(xiàn)物體間的交換。

3.5.2? Vue代碼

在主頁以及算法選擇頁面部分團(tuán)隊(duì)成員插入了文本框、按鈕、圖片等部分，通過參數(shù)設(shè)置將各個(gè)部分大小調(diào)整為比例顯示，以達(dá)到在不同的設(shè)備上都可以得到恰當(dāng)大小的展示的目的。通過點(diǎn)擊圖片或?qū)?yīng)文字就可以通過設(shè)置的跳轉(zhuǎn)參數(shù)自動(dòng)進(jìn)入對應(yīng)界面，流程如圖6所示。

而后在動(dòng)態(tài)模型展示界面主要設(shè)置了與Unity相關(guān)聯(lián)的函數(shù)，例如querySelector函數(shù)可用于進(jìn)行查詢篩選，獲取單個(gè)元素。navigator.userAgent函數(shù)可用于判斷當(dāng)前瀏覽器所處的環(huán)境，篩選用戶所使用的設(shè)備，createElement函數(shù)用于創(chuàng)建數(shù)據(jù)節(jié)點(diǎn)。

最后比較重要的部分就是sendMsgToUnity函數(shù)，該函數(shù)用于實(shí)現(xiàn)Vue和Unity之間的參數(shù)傳遞，通過Unity中GameObject自帶的SendMessage函數(shù)實(shí)現(xiàn)輸入文本的傳輸，同時(shí)注意與Unity代碼中的receiveMsgFromVue函數(shù)實(shí)現(xiàn)一一對應(yīng)，這樣才能保證輸入的數(shù)據(jù)可以準(zhǔn)確地在模型中展示出來，部分代碼如圖7所示。

4? 項(xiàng)目創(chuàng)新點(diǎn)

相比較其他數(shù)據(jù)結(jié)構(gòu)算法可視化網(wǎng)站，該平臺實(shí)現(xiàn)了與用戶動(dòng)態(tài)交互，可以按照用戶需求進(jìn)行算法演示。在目前的市場中有很多關(guān)于數(shù)據(jù)結(jié)構(gòu)算法可視化的網(wǎng)站，但是很多網(wǎng)站的可視化均是基于后臺固定的數(shù)據(jù)進(jìn)行算法的展示，用戶無法自主的更改數(shù)據(jù)，喪失了算法的動(dòng)態(tài)性。而本網(wǎng)站的一大亮點(diǎn)便是通過Unity平臺與Vue框架進(jìn)行交互處理，用戶可以在Vue的界面中自主定義數(shù)據(jù)，然后通過Vue進(jìn)行傳遞參數(shù)，同時(shí)Unity平臺則會接收到這些參數(shù)，并提取到用戶傳遞的數(shù)據(jù)，于是該算法便會基于用戶所給予的數(shù)據(jù)進(jìn)行動(dòng)態(tài)的演示，增強(qiáng)了用戶的使用體驗(yàn)，而不是僅僅觀看了一次靜態(tài)的動(dòng)畫演示，從而使用戶更能理解到算法的本質(zhì)。

5? 結(jié)? 論

數(shù)據(jù)結(jié)構(gòu)算法學(xué)習(xí)對計(jì)算機(jī)本專業(yè)的學(xué)生已是一門較為困難的學(xué)科，其他沒有經(jīng)過系統(tǒng)學(xué)習(xí)的卻想自學(xué)的開發(fā)者或?qū)W生就更難了。相比其他的算法2D展示網(wǎng)站，基于Unity3D完成的動(dòng)態(tài)建模更為直觀清晰。

今后該平臺也會在現(xiàn)有這么多算法的基礎(chǔ)上不斷完善，加入現(xiàn)實(shí)中的實(shí)例來幫助使用者理解各算法的邏輯步驟，通過不同的可視化提高工具的適用性與推廣性，讓數(shù)據(jù)結(jié)構(gòu)的算法不再那么困難。

參考文獻(xiàn)：

[1] JUNAIDU S. Effectiveness of multimedia in learning & teaching data structures online [J].The Turkish Online Journal of Distance Education，2008，9（4）：97.

[2] 張一馳.大數(shù)據(jù)十大經(jīng)典算法可視化實(shí)例教學(xué)系統(tǒng)研究與實(shí)現(xiàn) [D].西安：西安石油大學(xué)，2021.

[3] 劉叢.針對數(shù)據(jù)結(jié)構(gòu)的命令式算法可視化系統(tǒng)設(shè)計(jì)與開發(fā) [D].長沙：湖南大學(xué)，2015.

[4] 胡珊.程序可視化方法在程序設(shè)計(jì)課程教學(xué)中的應(yīng)用 [J].電腦知識與技術(shù)，2021，17（7）：104-105.

[5] WIBAWA P A，DWIYANTO A F，WIDIYANINGTIYAS T，et al. Utilization visualgo.net as a data structure learning media based on cdio [C]//2nd International Conference on Statistics，Mathematics，Teaching，and Research.Makassar：IOPscience，2018：012064[2023-01-06].https：//iopscience.iop.org/article/10.1088/1742-6596/1028/1/012064.

[6] 顧笑迎，吳瑨，李碩.基于Unity3D的自引查找工具設(shè)計(jì)與實(shí)現(xiàn) [J].圖書館研究與工作，2022（12）：74-78+82.

[7] 朱青.基于項(xiàng)目驅(qū)動(dòng)的Unity3D開發(fā)基礎(chǔ)教學(xué)分析 [J].科技視界，2021（35）：125-126.

[8] 劉亞茹，張軍.Vue.js框架在網(wǎng)站前端開發(fā)中的研究 [J].電腦編程技巧與維護(hù)，2022（1）：18-19+39.

[9] 趙龍，王風(fēng)碩.基于Vue的圖書銷售系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn) [J].電腦知識與技術(shù)，2021，17（36）：81-82+85.

[10] 嚴(yán)蔚敏.數(shù)據(jù)結(jié)構(gòu)：C語言版 [M].北京：清華大學(xué)出版社，2007.