linjinyu
/
g6
зеркало из https://gitee.com/antvis/g6.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>重新布局不改变视窗</title>
</head>
<body>
  <button id='changeView'>改变布局</button>
  <div id="mountNode" style="background: #ccc;"></div>
<script src="../build/g6.js"></script>
<script src="../build/grid.js"></script>
<script>
  const grid = new Grid()
  const graph = new G6.TreeGraph({
    plugins: [grid],
    container: 'mountNode',
    width: 500,
    height: 500,
    defaultNode: {
      size: [20, 20]
    },
    modes: {
      default: [ 'drag-node', 'drag-canvas', {
        type: 'collapse-expand',
        onChange(item, collapsed) {
          const data = item.getModel()
          data.collapsed = collapsed
          return true
        }
      } ]
    },
    nodeStyle: {
      default: {
        fill: '#40a9ff',
  			stroke: '#096dd9'
      }
    },
  	edgeStyle: {
    	default: {
      	stroke: '#A3B1BF'
    	}
  	},
  	defaultEdge: {
    	shape: 'cubic-horizontal'
    },
    layout: {
      type: 'dendrogram',
      nodeSep: 50,
      rankSep: 100,
      direction: 'LR'
    }
  });

  let data = {
    // isRoot: true,
    id: 'Root',
  	style: {
      fill: 'red'
    },
    children: [
      {
        id: 'SubTreeNode1',
        raw: {},
        children: [
          {
            id: 'SubTreeNode1.1'
          }
        ]
      },
      {
        id: 'SubTreeNode2',
        children: [
          {
            id: 'SubTreeNode2.1'
          },
          {
            id: 'SubTreeNode2.2'
          }
        ]
      } 
    ]
  };

  graph.data(data)
  graph.render()

  graph.fitView()

  document.getElementById('changeView').addEventListener('click', (evt) => {
    const matrix = G6.Util.clone(graph.get('group').getMatrix())
    data.children.pop()
    graph.changeData(data)
    graph.get('group').setMatrix(matrix)
    graph.paint()
  })
  
</script>
</body>
</html>