【图表示例】元素-边-04

G6A Graph Visualization Framework in JavaScripthttps://g6.antv.antgroup.com/zh/examples/element/edge/#horizontal-cubic

关于三次贝塞尔曲线的应用，扩展了解一下连接桩样式的配置（PortStyleProps）、状态样式属性的配置（state）以及 AntvDagre布局。

Element Node 节点配置项 连接桩样式 PortStyleProps

Element Edge 边配置项 状态样式属性 state

AntvDagre 布局

【三次贝塞尔曲线-垂直 效果图】 

【完整代码附注】 

import { Graph } from "@antv/g6";

const data = {
  "nodes": [
    {
      "id": "node1"
    },
    {
      "id": "node2"
    },
    {
      "id": "node3"
    },
    {
      "id": "node4"
    },
    {
      "id": "node5"
    },
    {
      "id": "node6"
    },
    {
      "id": "node7"
    }
  ],
  "edges": [
    {
      "id": "line-default",
      "source": "node1",
      "target": "node2"
    },
    {
      "id": "line-active",
      "source": "node1",
      "target": "node3",
      "states": [
        "active"
      ]
    },
    {
      "id": "line-selected",
      "source": "node1",
      "target": "node4",
      "states": [
        "selected"
      ]
    },
    {
      "id": "line-highlight",
      "source": "node1",
      "target": "node5",
      "states": [
        "highlight"
      ]
    },
    {
      "id": "line-inactive",
      "source": "node1",
      "target": "node6",
      "states": [
        "inactive"
      ]
    },
    {
      "id": "line-focus",  // 自定义状态边
      "source": "node1",
      "target": "node7",
      "states": [
        "focus"
      ]
    }
  ]
}

const graph = new Graph({
  container: 'container',
  data,
  node: {
    style: {
      // port: true,
      // ports: [
      //   { placement: 'top' },
      //   { placement: 'bottom' }
      // ]

      // 连接桩样式
      "port": true,  
      "ports": [
        { "key": "top", "placement": "top", "fill": "#7E92B5" },
        // { "key": "right", "placement": "right", "fill": "#F4664A" },
        { "key": "bottom", "placement": "bottom", "fill": "#FFBE3A" },
        // { "key": "left", "placement": [0, 0.5], "fill": "#D580FF" }
      ],
      "portR": 3,
      "portLineWidth": 1,
      "portStroke": "#fff"
      // 连接桩样式 END
    },
  },
  edge: {
    type: 'cubic-vertical',
    // 自定义边状态
    "state": {
      "focus": {
        "halo": true,
        "haloLineWidth": 6,
        "haloStroke": "yellow"
      }
    },
    // 自定义边状态 END
    style: {
      labelText: (d) => d.id,
      labelPadding: [0, 16],  // 标签内边距
      labelBackground: true,
      labelBackgroundFill: 'pink',
      labelBackgroundRadius: 6,
      endArrow: true,
    }
  },
  layout: {
    type: 'antv-dagre',
    begin: [50, 50], // 布局的左上角对齐位置
    rankdir: 'TB',  // 'TB':从上至下布局
    nodesep: 35,  // 节点间距（px）
    ranksep: 150  // 层间距（px）
  }
})

graph.render()

【三次贝塞尔曲线-水平 效果图】

【完整代码附注】 

import { Graph } from "@antv/g6";

const data = {
  "nodes": [
    {
      "id": "node1"
    },
    {
      "id": "node2"
    },
    {
      "id": "node3"
    },
    {
      "id": "node4"
    },
    {
      "id": "node5"
    },
    {
      "id": "node6"
    },
    {
      "id": "node7"
    }
  ],
  "edges": [
    {
      "id": "line-default",
      "source": "node1",
      "target": "node2"
    },
    {
      "id": "line-active",
      "source": "node1",
      "target": "node3",
      "states": [
        "active"
      ]
    },
    {
      "id": "line-selected",
      "source": "node1",
      "target": "node4",
      "states": [
        "selected"
      ]
    },
    {
      "id": "line-highlight",
      "source": "node1",
      "target": "node5",
      "states": [
        "highlight"
      ]
    },
    {
      "id": "line-inactive",
      "source": "node1",
      "target": "node6",
      "states": [
        "inactive"
      ]
    },
    {
      "id": "line-focus",  // 自定义状态边
      "source": "node1",
      "target": "node7",
      "states": [
        "focus"
      ]
    }
  ]
}

const graph = new Graph({
  container: 'container',
  data,
  node: {
    style: {
      // port: true,
      // ports: [
      //   { placement: 'top' },
      //   { placement: 'bottom' }
      // ]

      // 连接桩样式
      "port": true,  
      "ports": [
        // { "key": "top", "placement": "top", "fill": "#7E92B5" },
        { "key": "right", "placement": "right", "fill": "#F4664A" },
        // { "key": "bottom", "placement": "bottom", "fill": "#FFBE3A" },
        { "key": "left", "placement": [0, 0.5], "fill": "#D580FF" }
      ],
      "portR": 3,
      "portLineWidth": 1,
      "portStroke": "#fff"
      // 连接桩样式 END
    },
  },
  edge: {
    type: 'cubic-horizontal',
    // 自定义边状态
    "state": {
      "focus": {
        "halo": true,
        "haloLineWidth": 6,
        "haloStroke": "yellow"
      }
    },
    // 自定义边状态 END
    style: {
      labelText: (d) => d.id,
      labelPadding: [0, 16],  // 标签内边距
      labelBackground: true,
      labelBackgroundFill: 'pink',
      labelBackgroundRadius: 6,
      endArrow: true,
    }
  },
  layout: {
    type: 'antv-dagre',
    rankdir: 'LR',  // 'LR':从左至右布局
    nodesep: 30,  // 节点间距（px）
    ranksep: 150  // 层间距（px）
  }
})

graph.render()

 项目的创建参考 G6 详细教程，注意，node版本需要：required: { node: '>=18' }G6A Graph Visualization Framework in JavaScripthttps://g6.antv.antgroup.com/manual/getting-started/step-by-stephttps://g6.antv.antgroup.com/manual/getting-started/step-by-stephttps://g6.antv.antgroup.com/manual/getting-started/step-by-stephttps://g6.antv.antgroup.com/manual/getting-started/step-by-stephttps://g6.antv.antgroup.com/manual/getting-started/step-by-step