Cytoscape.js - 如何创建带有权重的图表以实现 Dijkstra?

问题描述 投票:0回答:1

我正在尝试从头开始创建一个带有节点和边的图。我正在创建节点和边,如下面的代码所示,但我在页面上看不到任何内容。这是我的 html 和其中的代码。我想使用 Dijsktra 添加边缘权重,但到目前为止,我在浏览器上看不到任何内容。

<html>

<head>
    <title>Tutorial 1: Getting Started</title>
    <script src="cytoscape.js"></script>
</head>

<style>
    #cy {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
    }
</style>

<body>
    <div id="cy"></div>
    <script>
        var cy = cytoscape({
            container: document.getElementById('cy'),
            elements: [{
                    data: {
                        id: 'a'
                    }
                },
                {
                    data: {
                        id: 'b'
                    }
                },
                {
                    data: {
                        id: 'c'
                    }
                },
                {
                    data: {
                        id: 'd'
                    }
                },
                {
                    data: {
                        id: 'e'
                    }
                },
                {
                    data: {
                        id: 'ab',
                        source: 'a',
                        target: 'b'
                    }
                    data: {
                        id: 'da',
                        source: 'b',
                        target: 'd'
                    }
                    data: {
                        id: 'bd',
                        source: 'b',
                        target: 'd'
                    }
                    data: {
                        id: 'eb',
                        source: 'e',
                        target: 'b'
                    }
                    data: {
                        id: 'ba',
                        source: 'b',
                        target: 'a'
                    }
                    data: {
                        id: 'ed',
                        source: 'e',
                        target: 'd'
                    }
                    data: {
                        id: 'ce',
                        source: 'c',
                        target: 'e'
                    }
                    data: {
                        id: 'bc',
                        source: 'b',
                        target: 'c'
                    }
                }
            ]
        });
    </script>
</body>

</html>
shortest-path cytoscape.js
1个回答
0
投票

其一,您的 body 和 html 标签未关闭。 Cytoscape 教程 假定您对 HTML、CSS 和 JS 有基本了解。如果您在基本的入门教程方面遇到困难,那么我建议您先查看Mozilla 网络教程

注意事项:

  • 确保您的标签是平衡的。
  • 确保您的外部(例如脚本)参考正确。
  • 如果不运行网络服务器,你就无法进行正确的网络开发,例如http 服务器
  • 从教程中的示例文件逐字开始比尝试先更改内容更容易。
  • 文档站点顶部的演示代码也可以是很好的起点。
© www.soinside.com 2019 - 2024. All rights reserved.