antv/x6 中 数据渲染

antv/x6是一个基于G6封装的图形化引擎，用于在Web上构建定制化的流程图、关系图和拓扑图等。数据渲染是x6中的一个重要功能，可以通过数据渲染将数据转换为图形化的元素，从而实现可视化的效果。下面是一个简单的数据渲染的例子：

import { Graph } from '@antv/x6'

const data = {
  nodes: [
    {
      id: 'node1',
      x: 40,
      y: 40,
      width: 80,
      height: 40,
      label: 'hello',
    },
    {
      id: 'node2',
      x: 160,
      y: 180,
      width: 80,
      height: 40,
      label: 'world',
    },
  ],
  edges: [
    {
      source: 'node1',
      target: 'node2',
    },
  ],
}

const graph = new Graph({
  container: document.getElementById('container'),
  width: 400,
  height: 300,
})

graph.fromJSON(data)

在这个例子中，我们首先定义了一个包含节点和边的数据对象，然后创建了一个Graph实例，并将数据对象传递给Graph实例的fromJSON方法，从而实现了数据渲染的效果。