如何反转 cytoscape.js 中的集合

Question

我有一组元素（使用 dijkstra 函数中的 pathTo 创建）。

我需要反转这个集合的元素，例如我想变换

• [14, 2, 37, 4, 5] 转换为 [5, 4, 37, 2, 14]。

我尝试按照下面的方法使用filter 函数，但没有成功。有谁知道如何反转集合（不是数组）？

path = dijkstraDiverse.pathTo(cy.$id('5'));

newpath = path.filter(function(ele, i, eles) {
  return eles[path.length - 1 - i];
});

Answer 1

我使用了sort 函数并以这种方式反转了集合。重要的部分是使用 -1 作为排序指标，这样一切都被简单地颠倒了。我添加了一些源自this BFS 示例的视觉说明：

var cy = (window.cy = cytoscape({
  container: document.getElementById("cy"),

  boxSelectionEnabled: false,
  autounselectify: true,

  style: [{
      selector: "node",
      css: {
        content: "data(id)",
        "text-valign": "center",
        "text-halign": "center",
        "height": "60px",
        "width": "60px",
        "border-color": "black",
        "border-opacity": "1",
        "border-width": "10px"
      }
    },
    {
      selector: "edge",
      css: {
        "label": "data(weight)",
        "target-arrow-shape": "triangle"
      }
    },
    {
      selector: ".highlight",
      css: {
        'background-color': '#61bffc',
        'line-color': '#61bffc',
        'target-arrow-color': '#61bffc',
        'transition-property': 'background-color, line-color, target-arrow-color',
        'transition-duration': '0.5s'
      }
    },
    {
      selector: ".old",
      css: {
        'background-color': '#ff6e63',
        'line-color': '#ff6e63',
        'target-arrow-color': '#ff6e63',
        'transition-property': 'background-color, line-color, target-arrow-color',
        'transition-duration': '0.5s'
      }
    }
  ],

  elements: {
    nodes: [{
        data: {
          id: "n0"
        }
      },
      {
        data: {
          id: "n1"
        }
      },
      {
        data: {
          id: "n2"
        }
      },
      {
        data: {
          id: "n3"
        }
      },
      {
        data: {
          id: "n4"
        }
      },
      {
        data: {
          id: "n5"
        }
      },
      {
        data: {
          id: "n6"
        }
      },
      {
        data: {
          id: "n7"
        }
      },
      {
        data: {
          id: "n8"
        }
      },
      {
        data: {
          id: "n9"
        }
      },
      {
        data: {
          id: "n10"
        }
      },
      {
        data: {
          id: "n11"
        }
      },
      {
        data: {
          id: "n12"
        }
      },
      {
        data: {
          id: "n13"
        }
      },
      {
        data: {
          id: "n14"
        }
      },
      {
        data: {
          id: "n15"
        }
      },
      {
        data: {
          id: "n16"
        }
      }
    ],
    edges: [{
        data: {
          source: "n0",
          target: "n1",
          weight: 1
        }
      },
      {
        data: {
          source: "n1",
          target: "n2",
          weight: 11
        }
      },
      {
        data: {
          source: "n1",
          target: "n3",
          weight: 12
        }
      },
      {
        data: {
          source: "n2",
          target: "n7",
          weight: 2
        }
      },
      {
        data: {
          source: "n2",
          target: "n11",
          weight: 3
        }
      },
      {
        data: {
          source: "n2",
          target: "n16",
          weight: 1
        }
      },
      {
        data: {
          source: "n3",
          target: "n4",
          weight: 32
        }
      },
      {
        data: {
          source: "n3",
          target: "n16",
          weight: 7
        }
      },
      {
        data: {
          source: "n4",
          target: "n5",
          weight: 6
        }
      },
      {
        data: {
          source: "n4",
          target: "n6",
          weight: 4
        }
      },
      {
        data: {
          source: "n6",
          target: "n8",
          weight: 11
        }
      },
      {
        data: {
          source: "n8",
          target: "n9",
          weight: 12
        }
      },
      {
        data: {
          source: "n8",
          target: "n10",
          weight: 1
        }
      },
      {
        data: {
          source: "n11",
          target: "n12",
          weight: 1
        }
      },
      {
        data: {
          source: "n12",
          target: "n13",
          weight: 2
        }
      },
      {
        data: {
          source: "n13",
          target: "n14",
          weight: 3
        }
      },
      {
        data: {
          source: "n13",
          target: "n15",
          weight: 5
        }
      }
    ]
  },

  layout: {
    name: "dagre",
    padding: 5
  }
}));


cy.ready(function() {
  const dijkstra = cy.elements().dijkstra(
    "#n0",
    function(edge) {
      const weight = edge.data("weight");
      return weight;
    }
  );
  const oldPath = dijkstra.pathTo(cy.$("#n10"));

  console.log(oldPath);
  const newPath = oldPath.sort(function(a, b) {
    return -1;
  });
  console.log(newPath);

  let i = 0;
  let j = 0;
  let highlightPath = newPath;
  let highlightNextEle = function() {
    if (i < highlightPath.length) {
      if (j == 0) {
        highlightPath[i].addClass("highlight");
      } else {
        //highlightPath[i].removeClass("highlight");
        highlightPath[i].addClass("old");
      }
      i++;
      setTimeout(highlightNextEle, 1000);
    } else if (i == highlightPath.length && j !== 1) {
      i = 0;
      j = 1;
      highlightPath = oldPath;
      setTimeout(highlightNextEle, 1000);
    }
  };

  // kick off first highlight
  highlightNextEle();

});

body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  float: left;
  position: absolute;
}

<html>

<head>
  <meta charset=utf-8 />
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
  <script src="https://unpkg.com/cytoscape@3.3.0/dist/cytoscape.min.js">
  </script>
  <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
  <!-- cyposcape dagre -->
  <script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
  <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>

<body>
  <div id="cy"></div>
</body>

</html>