Cytoscape 移除元素布局动画

Question

有没有办法重新渲染布局，同时忽略一些将被自定义动画移除的节点？

cy.layout(
{
  name: "dagre",
  rankDir: "LR",
  spacingFactor: 1,
  animate: true,
  animationDuration: 5000,
  rankSep: 200,
}).run();
setTimeout(() => {
   cy.elements()[2].animate(
     {
       style: {
         opacity: 0
       }
     },
     {
       duration: 5000
   );
}, 5000);
cy.layout(
    {
      name: "dagre",
      rankDir: "LR",
      spacingFactor: 1,
      animate: true,
      animationDuration: 5000,
      rankSep: 200,
    }).run();

我想在重新渲染不包括该节点的布局时过滤正在设置动画的节点

Answer 1

首先，您始终可以通过在所需集合上调用布局函数来run layouts on subsets of the elements：

cy.elements().layout({...})

另外，您可以通过断言两个集合之间的差异来filter out specific elements：

cy.elements().not(filterOutElements)

如果你把它放在一起，你应该得到这样的东西：

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: {
        "target-arrow-shape": "triangle"
      }
    }
  ],

  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"
        }
      },
      {
        data: {
          source: "n1",
          target: "n2"
        }
      },
      {
        data: {
          source: "n1",
          target: "n3"
        }
      },
      {
        data: {
          source: "n2",
          target: "n7"
        }
      },
      {
        data: {
          source: "n2",
          target: "n11"
        }
      },
      {
        data: {
          source: "n2",
          target: "n16"
        }
      },
      {
        data: {
          source: "n3",
          target: "n4"
        }
      },
      {
        data: {
          source: "n3",
          target: "n16"
        }
      },
      {
        data: {
          source: "n4",
          target: "n5"
        }
      },
      {
        data: {
          source: "n4",
          target: "n6"
        }
      },
      {
        data: {
          source: "n6",
          target: "n8"
        }
      },
      {
        data: {
          source: "n8",
          target: "n9"
        }
      },
      {
        data: {
          source: "n8",
          target: "n10"
        }
      },
      {
        data: {
          source: "n11",
          target: "n12"
        }
      },
      {
        data: {
          source: "n12",
          target: "n13"
        }
      },
      {
        data: {
          source: "n13",
          target: "n14"
        }
      },
      {
        data: {
          source: "n13",
          target: "n15"
        }
      }
    ]
  },

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

cy.elements().layout({
  name: "dagre",
  rankDir: "LR",
  spacingFactor: 1,
  animate: true,
  animationDuration: 5000,
  rankSep: 200
}).run();
setTimeout(() => {
  cy.elements()[0].animate({
    style: {
      opacity: 0
    }
  }, {
    duration: 5000
  });
  cy.elements().not(cy.elements()[0]).layout({
    name: "dagre",
    spacingFactor: 1,
    animate: true,
    animationDuration: 5000,
    rankSep: 200
  }).run();
});

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>