antvx6基础学习

import React from 'react'
import { Graph } from '@antv/x6'
import './index.less'

const commonAttrs = {
  body: {
    fill: '#fff',
    stroke: '#8f8f8f',
    strokeWidth: 1,
  },
  label: {
    refX: 0.5,
    refY: '100%',
    refY2: 4,
    textAnchor: 'middle',
    textVerticalAnchor: 'top',
  },
};
Graph.registerNode(
  'custom-node',
  {
    inherit: 'rect', // 继承于 rect 节点
    width: 100,
    height: 40,
    markup: [
      {
        tagName: 'rect', // 标签名称
        selector: 'body', // 选择器
      },
      {
        tagName: 'image',
        selector: 'img',
      },
      {
        tagName: 'text',
        selector: 'label',
      },
    ],
    attrs: {
      body: {
        stroke: '#8f8f8f',
        strokeWidth: 1,
        // fill: '#fff',
        rx: 6,
        ry: 6,
      },
      img: {
        'xlink:href':
          'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
        width: 16,
        height: 16,
        x: 12,
        y: 12,
      },
    },
  },
  true,
)

export default class Example extends React.Component {
  private container: HTMLDivElement

  componentDidMount() {
    const graph = new Graph({
      container: this.container,
      background: {
        color: '#F2F7FA',
      },
    })

    const data = {
      // 节点
      nodes: [
        {
          id: 'node1', // String，可选，节点的唯一标识
          x: 0,       // Number，必选，节点位置的 x 值
          y: 0,       // Number，必选，节点位置的 y 值
          width: 80,   // Number，可选，节点大小的 width 值
          height: 40,  // Number，可选，节点大小的 height 值
          label: 'hello', // String，节点标签
          imageUrl:
        'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg',
      attrs: commonAttrs,
      shape: 'image',
        },
        {
          id: 'node2', // String，节点的唯一标识
          x: 50,      // Number，必选，节点位置的 x 值
          y: 200,      // Number，必选，节点位置的 y 值
          width: 80,   // Number，可选，节点大小的 width 值
          height: 40,  // Number，可选，节点大小的 height 值
          label: 'world', // String，节点标签
          imageUrl:
          'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg',
        attrs: commonAttrs,
        shape: 'image',
        },
        {
          id: 'node3', // String，节点的唯一标识
          x: 200,      // Number，必选，节点位置的 x 值
          y: 50,      // Number，必选，节点位置的 y 值
          width: 80,   // Number，可选，节点大小的 width 值
          height: 40,  // Number，可选，节点大小的 height 值
          label: 'world3', // String，节点标签
          imageUrl:
          'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg',
        attrs: commonAttrs,
        shape: 'image',
        },
        {
          id: 'node4', // String，节点的唯一标识
          x: 200,      // Number，必选，节点位置的 x 值
          y: 200,      // Number，必选，节点位置的 y 值
          width: 80,   // Number，可选，节点大小的 width 值
          height: 40,  // Number，可选，节点大小的 height 值
          label: 'world4', // String，节点标签
          imageUrl:
          'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg',
        attrs: commonAttrs,
        shape: 'image',
        },
      ],
      // 边
      edges: [
        {
          source: 'node1', // String，必须，起始节点 id
          target: 'node2', // String，必须，目标节点 id
          label:'12222'
        },
        {
          source: 'node1', // String，必须，起始节点 id
          target: 'node3', // String，必须，目标节点 id
          label:'22'
        },
        {
          source: 'node3', // String，必须，起始节点 id
          target: 'node2', // String，必须，目标节点 id
          label:'2222'
        },
        {
          source: 'node3', // String，必须，起始节点 id
          target: 'node4', // String，必须，目标节点 id
        },
      ],
    }    
    graph.fromJSON(data)
    data.edges.forEach((edge)=>{
      graph.addEdge({
        source:edge.source,
        target:edge.target,
        attrs: {
          line: {
            stroke: '#000',
            strokeWidth: 1,
          },
        },
        label:edge.label||null,
        // labels: [
        //   {
        //     attrs: {
        //       label: {
        //         text: edge.label||null,
        //         fill: '#000',
        // fontSize: 14,
        // textAnchor: 'middle',
        // textVerticalAnchor: 'middle',
        // pointerEvents: 'none',
        //       },
        //       body:{
        //         fill:'#fff',
        //         // stroke:'#000'
        //       }
        //     },
        //   },
        // ],
        position: {
          distance: 200,
          options: {
            absoluteDistance: true,
            reverseDistance: true,
          }
        }
      })
    })
    
  }

  refContainer = (container: HTMLDivElement) => {
    this.container = container
  }

  render() {
    return (
      <div className="labels-app ">
        <div className="app-content" ref={this.refContainer} />
      </div>
    )
  }
}