拓扑排序——JS+Echats实现

最新推荐文章于 2024-08-29 09:43:20 发布
最新推荐文章于 2024-08-29 09:43:20 发布
阅读量461 收藏 2
点赞数 2
分类专栏： javascript Echarts 文章标签： javascript html echart
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhthht8888/article/details/84767630
版权

拓扑排序算法主要过程：
1.创建一个数组记录每个节点的前驱节点数目。
2.运用递归，每一次递归中，找出没有前驱节点的节点，输出该节点，并做相关标记（或删去）；然后找到该节点引出的连接，做相关标记（或删去）。
3.递归终止条件：所有的节点都已经被标记（或被删去），或者找不到没有前驱节点的节点。

核心代码如下：

 sort = function(){
      //找到没有前驱节点的节点
      var len_links = links.length;
      var arr_preNode = []; //存储左右节点的前驱节点数目
      //初始化
      for(var i = 0; i < 6; i++){
        arr_preNode[i] = 0;
      }

      //执行拓扑排序的递归运算
      doSort(len_links, arr_preNode);

      //运行结束后清除文本框最后的"-->"符号
      var textarea_sort = document.getElementById("textarea_sort");
      textarea_sort.value = textarea_sort.value.substring(0, textarea_sort.value.length-3);
    }

    
    //开始拓扑排序的递归运算
    function doSort(len_links, arr_preNode){
      //将没有被标记的arr_preNode的元素初始化
      for(var i = 0; i < arr_preNode.length; i++){
        if(arr_preNode[i] != "done"){
          arr_preNode[i] = 0;
        }
      }

      for(var i = 0; i < len_links; i++){
        if(links[i].pro != "0"){
          if(arr_preNode[parseInt(links[i].target)-1] != "done"){
            arr_preNode[parseInt(links[i].target)-1] ++;
          }
        }
      }

      //找到一个没有前驱节点的节点
      var node_index = null;
      for(var i = 0; i < len_links; i++){
        if(arr_preNode[i] == 0){
          node_index = i;
          break;
        }
      }

      //向文本框中输出结果
      var textarea_sort = document.getElementById("textarea_sort");
      textarea_sort.value += dataVisible[node_index].value[2] + "-->";
      
      //标记该节点
      arr_preNode[node_index] = "done";

      //标记该节点引出的相关连接
      for(var i = 0; i < len_links; i++){
        if(links[i].source == (node_index+1+"")){
          links[i].pro = "0";
        }
      }

      console.log("arr_preNode:"+ arr_preNode);
      console.log("links:"+ links);

      //终止递归的条件：arr_preNode中所有的元素都被标记
      for(var i = 0; i < arr_preNode.length; i++){
        if(arr_preNode[i] != "done"){
          doSort(len_links, arr_preNode);
        }
      }

      return;

    }

完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="echarts.min.js"></script>
  <title></title>
  <style>
    body{
      padding:0;
      margin:0;
      background-color:#F9F9F9;
    }

    *{
      padding:0;
      margin:0;
      background-color:#F9F9F9;
    }

    .textarea_wrapper{
      position: relative;
      left: 0;
      top: 150px;
      height: 300px;
      width: 300px;
    }

    .textarea_sort{
      display: block;
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 260px;
      box-sizing: border-box;
      color: #6d757a;
      font-size: 15px;
      font-family: Microsoft Yahei;
      font-weight: 600;
      line-height: 20px;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      outline: none;
      resize: none;
      transition: all .3s ease;
      cursor: text;
      white-space: pre-wrap;
      overflow-wrap: break-word;
      word-spacing: normal;
      text-transform: none;
      text-indent: 0px;
      text-shadow: none;
      text-rendering: auto;
    }

    .button{
      position: absolute;
      color: #fff;
      top: 0;
      font-size: 15px;
      font-weight: 600;
      height: 30px;
      width: 200px;
      line-height:30px; 
      background: #1E90FF;
      text-align: center;
      border:1px solid blue;
      border-radius: 5px;
      cursor: pointer;
      margin-left: 46px;
    }

    #mainEcharts{
      position: fixed !important;
      height: 600px;
      width: 400px;
      top:50%;
      left:50%;
      transform: translate3d(-50%,-50%,0);
    }

    .alert{
      position: fixed;
      margin: 0 auto;
      line-height: 30px;
      font-size: 20px;
      font-weight: 600;
      color: red;
      left: 50%;
      top:0;
      transform: translate3d(-50%,0,0);
    }
  </style>
</head>
<body>
  <div class="alert">
    1.所有节点均可拖拽；<br>
    2.推荐使用chrome/firefox浏览器。<br>
  </div>
   <div id="mainEcharts"></div>
   <div class="textarea_wrapper">
     <div class="button button_sort" onclick="sort()">Click me-->拓扑排序</div>
     <textarea class="textarea_sort" id="textarea_sort" cols="30" rows="10"></textarea>
   </div>
</body>

<script type="text/javascript">
    var dataVisible = [];//存放图中各个节点的数据信息
    var links = [];//存放图中各个连接

    var dataChild1=[{
      name:"1",//节点id
      symbol:"circle",//节点形状
      symbolSize:75,//节点大小
      //[x坐标，y坐标,label,颜色]
      value: [100, 100,"1","#1E90FF"], 
    }];
    var dataChild2=[{
      name:"2",//节点id
      symbol:"circle",//节点形状
      symbolSize:75,//节点大小
      //[x坐标，y坐标,label,颜色]
      value: [500, 100,"2","#1E90FF"], 
    }];
    var dataChild3=[{
      name:"3",//节点id
      symbol:"circle",//节点形状
      symbolSize:75,//节点大小
      //[x坐标，y坐标,label,颜色]
      value: [500, 400,"3","#1E90FF"], 
    }];
    var dataChild4=[{
      name:"4",//节点id
      symbol:"circle",//节点形状
      symbolSize:75,//节点大小
      //[x坐标，y坐标,label,颜色]
      value: [100, 400,"4","#1E90FF"], 
    }];
    var dataChild5=[{
      name:"5",//节点id
      symbol:"circle",//节点形状
      symbolSize:75,//节点大小
      //[x坐标，y坐标,label,颜色]
      value: [500, 800,"5","#1E90FF"], 
    }];
    var dataChild6=[{
      name:"6",//节点id
      symbol:"circle",//节点形状
      symbolSize:75,//节点大小
      //[x坐标，y坐标,label,颜色]
      value: [100, 800,"6","#1E90FF"], 
    }];
    

    //将所有节点存入dataVisible中
    dataVisible = dataVisible.concat(dataChild1)
                             .concat(dataChild2)
                             .concat(dataChild3)
                             .concat(dataChild4)
                             .concat(dataChild5)
                             .concat(dataChild6);

    var linkChild12 = [{
        source: "1",
        target: "2",
        pro: "1",
        label:{
            normal:{
                show: false,
            }
        },
        lineStyle:{
            normal:{
                width: 2,
                color: '#8B0000',
            }
        }
    }];

    var linkChild14 = [{
        source: "1",
        target: "4",
        pro: "1",
        label:{
            normal:{
                show: false,
            }
        },
        lineStyle:{
            normal:{
                width: 2,
                color: '#8B0000',
            }
        }
    }];

    var linkChild13 = [{
        source: "1",
        target: "3",
        pro: "1",
        label:{
            normal:{
                show: false,
            }
        },
        lineStyle:{
            normal:{
                width: 2,
                color: '#8B0000',
            }
        }
    }];

    var linkChild32 = [{
        source: "3",
        target: "2",
        pro: "1",
        label:{
            normal:{
                show: false,
            }
        },
        lineStyle:{
            normal:{
                width: 2,
                color: '#8B0000',
            }
        }
    }];

    var linkChild35 = [{
        source: "3",
        target: "5",
        pro: "1",
        label:{
            normal:{
                show: false,
            }
        },
        lineStyle:{
            normal:{
                width: 2,
                color: '#8B0000',
            }
        }
    }];

    var linkChild45 = [{
        source: "4",
        target: "5",
        pro: "1",
        label:{
            normal:{
                show: false,
            }
        },
        lineStyle:{
            normal:{
                width: 2,
                color: '#8B0000',
            }
        }
    }];

    var linkChild64 = [{
        source: "6",
        target: "4",
        pro: "1",
        label:{
            normal:{
                show: false,
            }
        },
        lineStyle:{
            normal:{
                width: 2,
                color: '#8B0000',
            }
        }
    }];

    var linkChild65 = [{
        source: "6",
        target: "5",
        pro: "1",
        label:{
            normal:{
                show: false,
            }
        },
        lineStyle:{
            normal:{
                width: 2,
                color: '#8B0000',
            }
        }
    }];


    links = links.concat(linkChild12)
                 .concat(linkChild13)
                 .concat(linkChild14)
                 .concat(linkChild32)
                 .concat(linkChild35)
                 .concat(linkChild45)
                 .concat(linkChild64)
                 .concat(linkChild65);


    var dataVisible_p=[];
    for(var i=0;i<dataVisible.length;i++){
       dataVisible_p[i]=new Array(); 
       for(var j=0;j<2;j++){      
       dataVisible_p[i][j]=dataVisible[i].value[j];
       }
    }

    //利用echarts框架令数据可视化
    var myChart=echarts.init(document.getElementById("mainEcharts"));
    myChart.setOption({
          xAxis: {
              min: 0,
              max: 1000,
              position: 'top',
              type: 'value',
              show:false,
              axisLine: {
                onZero: true,
                lineStyle:{
                  color:'#DCDCDC'
                }
              },
              axisLabel:{show:true},
              axisTick:{show:true},
          },
          yAxis: {
              min: 0,
              max: 800,
              inverse: true,
              type: 'value',
              show:false,  
              axisLine: {
                onZero: false,
                lineStyle:{
                  color:'#DCDCDC'
                }
              },
              axisLabel:{show:true},
              axisTick:{show:true},
              color:'#DCDCDC'
          },
          series: [
                   {
                     id: 'dataVisible',
                     type: 'graph', 
                     layout: 'none',
                     coordinateSystem: 'cartesian2d',
                     smooth: true,
                     data:dataVisible,
                     itemStyle: {
                         normal: {
                            color:function (parmas) {
                            return dataVisible[parmas.dataIndex].value[3];
                      },
                       borderColor: '#1E90FF',
                             borderWidth: 2,
                             shadowBlur: 10,
                             shadowColor: '#82dffe',
                             
                         }
                     },
                      label: {
                        normal: {
                          position: 'inside',
                          show: true,
                          formatter: function (parmas) {
                            return dataVisible[parmas.dataIndex].value[2];
                          },
                          backgroundColor: '#eee',
                          borderColor: '#555',
                          borderWidth: 2,
                          borderRadius: 5,
                          padding: 10,
                          fontSize: 18,
                          textBorderColor: '#000',
                          textBorderWidth: 3,
                          color: '#fff'
                        }
                      },
                      edgeSymbol: ['circle', 'arrow'],
                      edgeSymbolSize: [10, 20],
                      links: links
              },
           ], 
    });

    //添加节点可拖动功能
    myChart.setOption({
            series: [{
                id: 'dataVisible',
                data: dataVisible,
            }],
        
            graphic: echarts.util.map(dataVisible_p, function (item, dataIndex) {
                return {
                  id:"dataVisibleCircle"+dataIndex,
                    type: 'circle',
                    position: myChart.convertToPixel('grid', item),
                    shape: {
                        r: dataVisible[dataIndex].symbolSize/2+dataVisible[dataIndex].symbolSize/8
                    },
                    invisible: true,
                    draggable: true,
                    ondrag: echarts.util.curry(ondrag, dataIndex),
                    z: 100
               };
            })
    });

    //拖动节点
    function ondrag(dataIndex){
          var myChart=echarts.init(document.getElementById("mainEcharts"));
          dataVisible_p[dataIndex] = myChart.convertFromPixel('grid', this.position);
      
          var x = dataVisible_p[dataIndex][0];
          var y = dataVisible_p[dataIndex][1];
      
          dataVisible[dataIndex].value[0] = x;
          dataVisible[dataIndex].value[1] = y;


          myChart.setOption({
            series: [{
                id: 'dataVisible',
                data: dataVisible,
            }]
          });
    }

    //进行拓扑排序
    sort = function(){
      //找到没有前驱节点的节点
      var len_links = links.length;
      var arr_preNode = []; //存储左右节点的前驱节点数目
      //初始化
      for(var i = 0; i < 6; i++){
        arr_preNode[i] = 0;
      }

      //执行拓扑排序的递归算法
      doSort(len_links, arr_preNode);

      //运行结束后清除文本框最后的"-->"符号
      var textarea_sort = document.getElementById("textarea_sort");
      textarea_sort.value = textarea_sort.value.substring(0, textarea_sort.value.length-3);
    }

    
    //进行拓扑排序的递归算法
    function doSort(len_links, arr_preNode){
      //将没有被标记的arr_preNode的元素初始化
      for(var i = 0; i < arr_preNode.length; i++){
        if(arr_preNode[i] != "done"){
          arr_preNode[i] = 0;
        }
      }

      for(var i = 0; i < len_links; i++){
        if(links[i].pro != "0"){
          if(arr_preNode[parseInt(links[i].target)-1] != "done"){
            arr_preNode[parseInt(links[i].target)-1] ++;
          }
        }
      }

      //找到一个没有前驱节点的节点
      var node_index = null;
      for(var i = 0; i < len_links; i++){
        if(arr_preNode[i] == 0){
          node_index = i;
          break;
        }
      }

      //向文本框中输出结果
      var textarea_sort = document.getElementById("textarea_sort");
      textarea_sort.value += dataVisible[node_index].value[2] + "-->";
      
      //标记该节点
      arr_preNode[node_index] = "done";

      //标记该节点引出的相关连接
      for(var i = 0; i < len_links; i++){
        if(links[i].source == (node_index+1+"")){
          links[i].pro = "0";
        }
      }

      console.log("arr_preNode:"+ arr_preNode);
      console.log("links:"+ links);

      //终止递归的条件：arr_preNode中所有的元素都被标记
      for(var i = 0; i < arr_preNode.length; i++){
        if(arr_preNode[i] != "done"){
          doSort(len_links, arr_preNode);
        }
      }

      return;

    }
</script>
</html>
Joris要为所欲为
关注
专栏目录
javascript实现拓扑排序
景洪的博客
09-12 908
拓扑序： 如果，图中从v到w有一条有向路径，则v一定排在w之前，满足此条件的顶点序列称之为拓扑序，获得一个拓扑序的过程叫做拓扑排序；AVO如果有合理的拓扑序，则必定是有向无环图； // 拓扑排序 topSort: function(){ var that = this; var a = 1; var visit
layui数据可视化_flask+layui+echarts实现前端动态图展示数据
weixin_42627459的博客
01-14 1942
效果图：该效果主要实现一个table展示数据，并在下方生成一个折线图。实现方式：1、首先需要对表格进行一个数据加载，这里用到了layui的table.render，具体用法可以参考html部分：1 js部分：1 2 layui.use(['form', 'table', 'echarts'], function() {3 var $ =layui.jquery,4 form...
js-topological-sorting:JavaScript的拓扑排序算法
03-26
:oden: JavaScript的拓扑排序算法。 参见 。 :warning: 该代码要求定义regeneratorRuntime ，例如，通过导入 。 // Sort anything that can be iterated over with `for (const [u, v] of ...)` import { sorted } from '@aureooms/js-topological-sorting' ; sorted ( [ "ab" , "bc" ] ) ; // abc // Add a comparison function to break ties. import { increasing } from '@aureooms/js-compare' ; sorted ( [ "ab" , "cd" ] , increasing ) ; // abcd import { dec
拓扑排序JS实现
zjw_python的博客
12-24 1781
1 定义 在一个表示工程的有向图中，用顶点表示活动，用弧表示活动之间的优先关系，这样的有向图为顶点表示活动的网，称为AOV网（Activity On Vertex Network） 设G={V,E}是一个具有n个顶点的有向图，V中的顶点序列v1、v2… 满足若从顶点vi到vj有一条路径，则在顶点序列中顶点vi必须在顶点vj之前，则称这样的顶点序列为一个拓扑序列 拓扑排序就是对一个有向图构造拓扑序列...
拓扑排序（思想+代码+示例）
最新发布
weixin_47151388的博客
08-29 1802
了解图谱排序前，我们先了解什么是有向无环图。有向无环图，简称DAG有向图中的每条边都有一个方向，即每条边从一个节点指向另一个节点。例如，如果存在一条边 u→v，这表示从节点 u 指向节点 v。无环图中不存在任何包含多个节点的环路。也就是说，从一个节点出发，通过若干条边可以到达的其他节点中，不可能回到这个出发节点。一个图 G=(V,E)由一组节点 V和一组有向边 E组成。
拓扑排序
peizhiinfo
10-31 142
什么是拓扑排序？简单的说，就是由某个集合上的一个偏序序列得到该集合上的一个全序序列，这个操作称之为拓扑排序。 那么，我们首先来回顾一下离散数学中的关于偏序和全序的定义： 若集合X上的关系R是自反的，反对称的和传递的，则称R是集合X上的偏序关系。 设R是集合X上的pain徐，如果对每个x，y输入X，必有xRy或者yRx，则称R是集合X上的全序关系。 举个简单的例子说明什么是拓扑排序。 现在...
拓扑排序的原理及其实现
ALex:to give you a better comprehension
12-23 445
本文转载自> http://blog.csdn.net/dm_vincent/article/details/7714519 感谢作者的辛勤劳动！本文将从以下几个方面介绍拓扑排序：拓扑排序的定义和前置条件 和离散数学中偏序/全序概念的联系 典型实现算法 Kahn算法 基于DFS的算法解的唯一性问题 实际例子 取材自以下材料：http://en.wikipedia.org/wiki/T
简单拓扑排序——源码
10-31
在给定的"简单拓扑排序——源码"中，我们可以期待看到一个用某种编程语言实现的拓扑排序算法。源码通常会包含以下几个关键步骤： 1. **初始化**：创建两个队列，一个用于存储入度为零的节点（即没有前驱节点的节点...
springmvc+EasyUI+ECharts
03-19
综上所述，"springmvc+EasyUI+ECharts"的组合提供了一个强大的后台管理系统框架，集成了高效的后端处理、直观的用户界面和强大的数据可视化功能，是开发后台管理系统时的理想选择。通过导入这个完整的源码，开发者...
拓扑排序——数据结构
12-30
有用哦，拓扑排序
基于python实现的一个有向拓扑图绘制源码+详细注释.zip
07-03
基于python实现的一个有向拓扑图绘制源码+详细注释.zip基于python实现的一个有向拓扑图绘制源码+详细注释.zip基于python实现的一个有向拓扑图绘制源码+详细注释.zip基于python实现的一个有向拓扑图绘制源码+详细注释...
JavaScript拓扑排序的实现
梁婉玲krysliang的博客
01-05 1038
/** * 拓扑排序 * 凡是需要通过局部顺序来推到全局顺序的，使用拓扑排序来解决。 * 还可以使用拓扑排序来检测图中环的存在。 * * * 假设几个源文件之间两两之间的依赖关系已知，如何确定一个全局的编译的顺序呢？ * 比如a依赖b，b依赖c，d依赖b * 那么编译顺序就是 c->b->a->d * 或者c->b->d->a * * * 我们使用一个有向无环图来实现拓扑排序。 * 文件之间的依赖关系抽象成一个有向图，每个源文件就是一个.
JavaScript 拓扑排序 算法
qq_29091239的博客
04-24 1176
拓扑排序会对有向图的所有顶点进行排序，使有向边从前面的顶点指向后面的顶点。拓扑排序算法与深度优先搜索类似。不同的是，拓扑排序算法不会立即输出已访问的顶点，而是访问当前顶点邻接表中的所有相邻顶点，直到这个列表穷尽时，才将当前顶点压入栈中。拓扑排序算法被拆分为两个函数。第一个函数 topSort()，会设置排序进程并调用一个辅助函数 topSortHelper()，然后显示排序好的顶点列表。主要工作是...
拓扑排序原理分析及js实现
weixin_33712987的博客
12-21 882
1. 偏序和全序的概念 1.1. 偏序 设R是集合A上的一个二元关系，若R满足下列三个性质则称R为A上的偏序关系自反性：对任意x∈A，有<x,x>∈R反对称性：对任意的x,y∈A,如果<x,y>∈R,且<y,x>∈R,则必有x=y传递性：对任意x,y,z∈A，若<x,y>∈R,<y,z...
43. 拓扑排序（javascript实现）
weixin_41837346的博客
04-08 404
1. 定义 一种图论算法 只有有向无环图(Directed Acyclic Graph，简称DAG )才有拓扑排序 DAG必至少有一个入度为零的点和一个出度为零的点 2. 有向无环图实现 class LinkedList{ constructor(data){ this.data = data this.arr = [] } addPoint(val){ this.arr.p...
拓扑排序 dfsc++
10-20
拓扑排序是一种对有向无环图进行排序的算法，它可以用来确定前驱关系，验证图中是否有环等。拓扑排序的基本思想是将图中的节点按照一定的顺序排列，使得所有的有向边从排在前面的节点指向排在后面的节点。在实际应用...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值