点击编辑路径

1 .https://x6.antv.vision/zh/examples/showcase/faq#path-editor
2 .使用场景

1 .目前主要是图编辑器,节点都是使用的时候加的.不存在一些给一堆节点,然后让你自己连接,如果有这种情况,并且节点数量很大,才需要这个布局组件,
2 .除此之外,别的情况应该都不需要吧.

网格布局

POPO-screenshot-20220120-173628.png

1 .如果节点就有位置数据,那么还会覆盖么?
2 .网格布局根据参数指定的排序方式对节点进行排序后，将节点排列在网格上
3 .参数

1 .width:布局区域宽度
2 .height:布局区域高度
3 .center:布局中心点
4 .preventOverlap:是否防止重叠
5 .preventOverlapPadding:防止重叠节点的间距padding
6 .rows:网格的行数.不设置的时候算法根据节点数量,布局控件,自动计算
7 .cols:网格的列数.不设置的时候同上
8 .condense:为false的时候表示利用所有可用画布空间,为true的时表示利用最小的画布空间
9 .sortBy:指定排序的依据.数值越高的则该节点放置的越中心.
10 .nodeSize:统一设置节点的尺寸

4 .代码.所有必须放在一个model里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/@antv/x6/dist/x6.js"></script>
    <script src="https://unpkg.com/@antv/layout/dist/layout.min.js"></script>
</head>
<body>
    <h3>基本图形和属性</h3>
    <div id="container">

    </div>
    <script>
        const graph=new X6.Graph({
            container:document.getElementById('container'),
            width:800,
            height:600,
            grid:true,  
        })

        const model = {
            nodes: [
            ],
            edges: [
            ],
          }
        
        const keyPoints = [
          20, 12, 12, 4, 18, 12, 12, 6, 16, 17, 17, 10, 10, 3, 3, 2, 2, 9, 9, 10,
        ]

        for(let i=1;i<=21;i++){
            model.nodes.push({
                id: `${i}`,
                shape: 'circle',
                width: 32,
                height: 32,
                attrs: {
                  body: {
                    fill: '#5F95FF',
                    stroke: 'transparent',
                  },
                  label: {
                    fill: '#ffffff',
                  },
                },
                label: i,
            })
        }

        for (let i = 0; i < keyPoints.length; i += 2) {
            model.edges.push({
              source: `${keyPoints[i]}`,
              target: `${keyPoints[i + 1]}`,
              attrs: {
                line: {
                  stroke: '#A2B1C3',
                  strokeWidth: 2,
                  targetMarker: null,
                },
              },
            })
          }


        const gridLayout = new layout.GridLayout({
            type: 'grid',
            width: 600,
            height: 400,
            center: [300, 200],
            rows: 4,
            cols: 4,
        })
          
        const newModel = gridLayout.layout(model)
        
        graph.fromJSON(newModel)
        
    </script>
</body>
</html>