javascript - 如何从具有所有节点数据的对象创建图形？

Question

我必须为一个学校项目制作一个有轨电车和地铁的路线规划器。我收到了这段代码，它处理 19 个带有电车和地铁数据的 JSON 文件。这包括站点名称、站点位置等。

/**
 * ImportMap is a function that read the content from a URL and expects JSON in return.
 * It then hands over the content to the function processMap to actually process its content
 * 
 * @param {*} fileName 
 */

function importMap (fileName) {

    var xmlhttp = new XMLHttpRequest();
    var url = fileName;

    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var myArr = JSON.parse(this.responseText);
            processMapInfo(myArr);
        }
    };
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

/**
 * Reads the line information and updates the internal map structure
 * @param {*} lineData (JSON string as object)
 */
function processMapInfo (lineData) {
    listOfLines.push(lineData)

    var mainItem;
    var networkItem;
    var networkItemStop;
    var listOfStops = {}; // declared as associative array

    for (mainItem in lineData) {
        logInfo (mainItem,LOG_DETAILS);
        // There should be only 1 mainItem that starts with something like "GVB_"
        // We need this to access the other information

        /* First read the transportation type and its id */
        typeOfTransportation = lineData[mainItem]["Line"].TransportType;
        idOfTransportation = lineData[mainItem]["Line"].LinePublicNumber;

        for (networkItem in lineData[mainItem]["Network"]) {
            // usually there are 1 or 2 networkItems that each represent a list of network stops
            for (networkItemStop in lineData[mainItem]["Network"][networkItem]) {
                // scan all stops
                // add a stop to a list based on its order; this is described by UserStopOrderNumber
                // but only when it does not exist already
                if (!listOfStops.hasOwnProperty(lineData[mainItem]["Network"][networkItem][networkItemStop].UserStopOrderNumber)) {
                    listOfStops [lineData[mainItem]["Network"][networkItem][networkItemStop].UserStopOrderNumber] = 
                        lineData[mainItem]["Network"][networkItem][networkItemStop].TimingPointName;
                }
            }
        }
    }   
    logInfo (listOfStops,LOG_DETAILS);

    // listOfStops now has all the info to update your map structure :-)
}

/**
 * We need a way to check that ALL imports have finished as this is a ASYNCHRONOUS process
 * @param {*} expectedNumberOfFiles 
 */
function checkImport (expectedNumberOfFiles) {
    console.log(listOfLines);

    if (listOfLines.length == expectedNumberOfFiles) {
        clearTimeout ();


        // etc... all JSON files have been processed ... do your thing :-)
    }
}

importMap ("./JSON_files/GVB_1_1.json");
importMap ("./JSON_files/GVB_2_1.json");
importMap ("./JSON_files/GVB_3_1.json");
importMap ("./JSON_files/GVB_4_1.json");
importMap ("./JSON_files/GVB_5_1.json");
importMap ("./JSON_files/GVB_7_1.json");
importMap ("./JSON_files/GVB_11_1.json");
importMap ("./JSON_files/GVB_12_1.json");
importMap ("./JSON_files/GVB_13_1.json");
importMap ("./JSON_files/GVB_14_1.json");
importMap ("./JSON_files/GVB_17_1.json");
importMap ("./JSON_files/GVB_19_1.json");
importMap ("./JSON_files/GVB_24_1.json");
importMap ("./JSON_files/GVB_26_1.json");
importMap ("./JSON_files/GVB_50_1.json");
importMap ("./JSON_files/GVB_51_1.json");
importMap ("./JSON_files/GVB_52_1.json");
importMap ("./JSON_files/GVB_53_1.json");
importMap ("./JSON_files/GVB_54_1.json");


// add a short wait so we know ALL 19 lines have been processed
setTimeout (checkImport (19),1000);

老实说，我不知道这段代码究竟做了什么以及它是如何做到的。但我认为 listOfStops 包含所有停靠点，此函数将它们放入此变量中。

对于路线规划器，我必须使用 Dijktra 的算法。但在我可以使用该算法之前，我需要一个包含所有停靠点作为节点并添加边的图形。我在网上找到了一些信息，但他们是手动创建节点和边的。由于有很多停靠点，我一直在寻找一种从（我认为）listOfStops 数组创建图形的方法。我在网上找到了一些可能的解决方案，但它们使用外部库或框架。我的学校决定我需要自己制作所有东西，所以不能使用外部的框架库。这摆脱了所有这些解决方案。

我正在寻找的是至少创建图表的任何可能帮助。我不知道如何做到这一点，也无法在谷歌或 stackoverflow 上找到任何东西。

这是包含行信息的文件之一：https ://ori.clow.nl/algds/GVB_1_1.json

任何帮助，将不胜感激！

标签： javascriptjsongraphdijkstra