js实现数据结构--无向图

图的概念:

图是网络结构的抽象模型,是一组由边连接的节点(或节点)。学习图很重要,任何二元关系都可以用图来表示,比如可以用图来表示道路,航班,以及通信状态等。一个图G=(V,E)由以下元素来表示,V是一组顶点;E是一组边,连接V中的顶点。

图的相关术语:

  • 相邻顶点:由一条边连接在一起的顶点
  • 节点的度:一个节点的相邻顶点的数量
  • 路径:一个顶点v1,v2,v3.. vk的一个连续序列,其中vi和v(i+1)是相邻的
  • 简单路径:路径中不包含重复的顶点的路径

图的表示:

图的表示有两种方式:

  • 邻接矩阵:一个二维数组来表示顶点之间的连接,两顶点之间有连接则值为1,反之为0
  • 邻接表:由图中每个顶点的相邻顶点列表组成

js实现图的定义及基本方法:

图也是一个类(本次考虑的主要是无向图),类中有两个变量,一个是数组,用来存放图中的所有的顶点;另一个是字典,用来存储每个顶点的邻接表。所以在定义或者使用图的一些基本方法时需要先定义字典的基本定义和基本方法。这里先展示图的结构和方法的定义,见如下代码:

//定义个无向图
    function Graph() {
        //创建一个数组用来存放图中的所有顶点
        var vertices = [];
        //创建一个字典来存储邻接表
        var adjList = new Dictionary();

        //向图中添加一个新的节点
        this.addVertex = function (v) {
            vertices.push(v);
            adjList.set(v, []);//设置顶点v作为键对应的字典值为一个空数组
        }

        //向图中添加顶点之间的边
        this.addEdge = function (v,w) {
            adjList.get(v).push(w);//将w加入到v的邻接表中
    
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用JavaScript和SVG实现Web前端WorkFlow工作流DAG有向无环的步骤: 1. 首先,需要定义一个包含节点和边的数据结构,可以使用邻接表或邻接矩阵来表示。 2. 接下来,需要使用SVG来绘制节点和边。可以使用SVG的circle元素来绘制节点,使用line元素来绘制边。 3. 在绘制节点和边之前,需要计算每个节点的位置。可以使用拓扑排序算法来计算节点的位置,确保没有环。 4. 绘制节点和边时,可以使用鼠标事件来实现节点的拖拽和边的连线。 5. 最后,可以添加一些交互式功能,例如缩放和平移。 以下是一个简单的JavaScript和SVG实现Web前端WorkFlow工作流DAG有向无环的示例代码: ```javascript // 定义节点和边的数据结构 var nodes = [ { id: 1, name: 'Node 1', x: 100, y: 100 }, { id: 2, name: 'Node 2', x: 200, y: 200 }, { id: 3, name: 'Node 3', x: 300, y: 100 } ]; var edges = [ { source: 1, target: 2 }, { source: 2, target: 3 } ]; // 计算节点的位置 var layout = dagre.layout() .nodeSep(50) .rankSep(50) .run({ nodes: nodes, edges: edges }); // 绘制节点和边 var svg = d3.select('svg'); var g = svg.append('g'); var node = g.selectAll('.node') .data(nodes) .enter() .append('g') .attr('class', 'node') .attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; }); node.append('circle') .attr('r', 20) .style('fill', 'white') .style('stroke', 'black') .style('stroke-width', '2px'); node.append('text') .attr('dy', '.35em') .text(function(d) { return d.name; }); var edge = g.selectAll('.edge') .data(edges) .enter() .append('line') .attr('class', 'edge') .attr('x1', function(d) { return layout.nodes[d.source].x; }) .attr('y1', function(d) { return layout.nodes[d.source].y; }) .attr('x2', function(d) { return layout.nodes[d.target].x; }) .attr('y2', function(d) { return layout.nodes[d.target].y; }) .style('stroke', 'black') .style('stroke-width', '2px'); // 添加交互式功能 var zoom = d3.zoom() .on('zoom', function() { g.attr('transform', d3.event.transform); }); svg.call(zoom); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值