logoCreated with Sketch.

G6

显示与隐藏

阅读时间约 1 分钟

节点与边的显示/隐藏

使用下面四个函数可以实现节点与边的显示/隐藏：

// 显示节点实例 nodeItem，该节点的 visible 属性值在该方法调用后被置为 true
nodeItem.show();

// 隐藏节点实例 nodeItem，该节点的 visible 属性值在该方法调用后被置为 false
nodeItem.hide();

// 显示边实例 edgeItem，该边的 visible 属性值在该方法调用后被置为 true
edgeItem.show();

// 隐藏边实例 edgeItem，该边的 visible 属性值在该方法调用后被置为 false
edgeItem.hide();

示例

该示例摘取了元素显示/隐藏的相关操作部分，通过鼠标监听对节点、边、画布的点击事件，显示和隐藏元素：

// 鼠标点击节点，隐藏该节点
graph.on('node:click', ev => {
  const node = ev.item;
  console.log('before hide(), the nodevisible = ', node.get('visible'));
  node.hide();
  graph.paint();
  console.log('after hide(), the node visible = ', node.get('visible'));
});

// 鼠标点击边，隐藏该边
graph.on('edge:click', ev => {
  const edge = ev.item;
  console.log('before hide(), the edge visible = ', edge.get('visible'));
  edge.hide();
  graph.paint();
  console.log('after hide(), the edge visible = ', edge.get('visible'));
});

// 鼠标点击画布，显示所有节点和边
graph.on('canvas:click', ev => {
  const nodes = graph.getNodes();
  const edges = graph.getEdges();
  nodes.forEach(node => {
    node.show();
  });
  edges.forEach(edge => {
    edge.show();
  });
  graph.paint();
});