x6-自定义图

x6使用记录

注意点：

HTML/React/Vue节点渲染出错---现象--苹果系统部分节点未显示。

HTML/React/Vue 节点内容都是渲染在 SVG 的 foreignObject 节点内部，因为浏览器的兼容性问题，经常会出现一些异常的渲染行为。主要表现形式为：

• 节点内容展示不全
• 节点内容闪烁

可以通过以下方式来规避：

• 节点内部元素的 css 样式中不要使用 position:absolute 和 position:relative
• 节点内部元素的 css 样式中不要使用 transform
• 节点内部元素的 css 样式中不要使用 opacity

1-节点：
html:不建议使用

   const cjArr=cj.map((item:any)=>{
         return  graph.addNode({
           x: item?.x,
           y: item?.y,
           width: 106,
           height: 45,
           shape: 'html',
          html() {
          const wrap = document.createElement('div');
            wrap.innerHTML = `
      <div  class=${item?.class}>
         ${item?.text}
       </div>`
            return wrap
          },
         });
       });
支持html,没有节点方便，比如加popover等

2-组件-渲染 React 节点

使用 HTML/React/Vue/Angular 渲染 | X6

   graph.addNode({
      x: 980,
      y: 50,
      width: 106,
      height: 45,
      shape: 'react-shape',
      component: <MyComponent text="Hello" />,
});

npm install @antv/x6-react-shape

import '@antv/x6-react-shape'

线

定义  
Graph.registerConnector(
      'curve',
      (sourcePoint, targetPoint) => {
        const path = new Path();
        注意这里修改和下面的区别
        sourcePoint = {
          x: sourcePoint.x + 115,
          y: sourcePoint.y - 20,
        };
        path.appendSegment(Path.createSegment('M', sourcePoint));
        path.appendSegment(
          Path.createSegment(
            'C',
            sourcePoint.x,
            sourcePoint.y + 30,
            targetPoint.x,
            targetPoint.y - 30,
            targetPoint.x + 50,
            targetPoint.y,
          ),
        );
        return path.serialize();
      },
      true,
    );
使用：anchor注意

      arr.forEach((item:any)=>{
        graph.addEdge({
          source: {cell:item?.source,anchor: 'bottom', connectionPoint: 'anchor'  },
          target: { cell:item.target,anchor: 'top', connectionPoint: 'anchor'},
          // connector: { name: 'smooth' },
          // vertices: [{ x: 660, y: 300 }],
          connector: { name: 'curve' },
          attrs: {
            line: {
              stroke: '#1890ff',
              strokeDasharray: 5,
              targetMarker: 'classic',
              style: {
                animation: 'ant-line 30s infinite linear',
              },
            },
          },
        })

备注：

初始化

    // 初始化画布
    // graph && graph?.dispose();
    if (document.getElementById('container')) {
      document.getElementById('container').innerHTML = '';
    } else {
      return;
    }
   多次查询会重叠，也就是未清空上次，这里与G6不同的是G6是不会直接变化，X6每次都渲染了，处理方案类似。
    graph = new Graph({
      grid: true,
      container: document.getElementById('container'),
      highlighting: {
        nodeAvailable: {
          name: 'className',
          args: {
            className: 'available',
          },
        },
        magnetAvailable: {
          name: 'className',
          args: {
            className: 'available',
          },
        },
        magnetAdsorbed: {
          name: 'className',
          args: {
            className: 'adsorbed',
          },
        },
      },
      interacting: () => {
        return {
          nodeMovable: false,
        };
      },
      selecting: true,
      panning: true, //拖拽平移
      mousewheel: {
        enabled: true,
        modifiers: ['ctrl', 'meta'],
      },
      autoResize: true, //目前只支持flex
    });

    graph.enableSelection();
    graph.zoom(-0.4);
    graph.clearCells();

    graph?.translate(0, 0); //平移用

          <div id={'container'} style={{ width: '100%', height: 700, flex: 1 }}></div>
          <ul className={styles.handler}>
            <li className={styles.item}>
              <ZoomInOutlined onClick={() => graph?.zoom(0.1)} />
            </li>
            <li className={styles.item}>
              <ZoomOutOutlined onClick={() => graph?.zoom(-0.1)} />
            </li>
            <li className={styles.item}>
              <AntDesignOutlined onClick={() => graph?.zoomToFit()} />
            </li>
            <li className={styles.item}>
              <OneToOneOutlined
                onClick={() => {
                  graph.zoom(1, { absolute: true });
                }}
              />
            </li>
          </ul>