在AntV 中改变Graph初始坐标系

要在AntV中改变Graph的初始坐标系，可以使用Graph组件的`layout`属性。通过设置不同的布局算法和参数，可以实现不同的初始坐标系。

例如，要使用Fruchterman布局算法，可以在Graph组件中添加如下代码：

<Graph data={data} layout={{
  type: 'fruchterman',
  gravity: 5,
  speed: 5,
  iterations: 1000,
}} />

其中，`type`属性指定布局算法为Fruchterman布局，`gravity`属性控制节点间的引力大小，`speed`属性控制节点的运动速度，`iterations`属性控制迭代次数。

还可以使用其他布局算法，如ForceAtlas2布局、Circular布局等。具体可参考AntV官方文档。

相关问题

在AntV 中改变Graph.resetCells初始坐标系

在 AntV 中，`Graph.resetCells()` 方法用于重新设置 Graph 的节点位置。默认情况下，`resetCells()` 方法会按照节点在数据中的顺序进行排列。如果要改变节点的初始坐标系，可以在调用 `resetCells()` 方法前先对节点的位置进行修改。

假设我们有如下的节点数据：

const data = {
  nodes: [
    { id: 'node1', x: 100, y: 100 },
    { id: 'node2', x: 200, y: 200 },
    { id: 'node3', x: 300, y: 300 }
  ],
  edges: [
    { source: 'node1', target: 'node2' },
    { source: 'node2', target: 'node3' }
  ]
};

可以通过修改节点的 `x` 和 `y` 属性来改变节点的位置。例如，将第一个节点的位置修改为 `(50, 50)`：

data.nodes[0].x = 50;
data.nodes[0].y = 50;

然后调用 `resetCells()` 方法来重新设置节点位置：

graph.data(data);
graph.render();
graph.fitView();
graph.resetCells();

这样就可以改变节点的初始坐标系了。当然，也可以使用其他算法来对节点进行布局，如前面提到的 Fruchterman 布局等。

antv x6中使用new Graph的时候传递数据

在 antv X6 中使用 `new Graph` 时，可以通过传递一个对象来初始化图形。这个对象可以包含以下属性：

- `width`：图形的宽度
- `height`：图形的高度
- `grid`：网格配置
- `background`：背景配置
- `snapline`：对齐线配置
- `history`：历史记录配置
- `clipboard`：剪贴板配置
- `keyboard`：键盘快捷键配置
- `resizing`：调整大小配置
- `resizing.direction`：调整大小的方向
- `resizing.minSize`：调整大小的最小尺寸
- `embedding`：嵌入配置
- `validateEmbedding`：嵌入验证函数
- `validateConnection`：连接验证函数
- `highlighting`：高亮配置

以下是一个示例：

import { Graph } from '@antv/x6';

const graph = new Graph({
  container: document.getElementById('graph-container'),
  width: 800,
  height: 600,
  grid: true,
  background: {
    color: '#f5f5f5',
  },
  snapline: true,
  history: true,
  clipboard: true,
  keyboard: true,
  resizing: {
    direction: ['top', 'right', 'bottom', 'left', 'topRight', 'bottomRight', 'bottomLeft', 'topLeft'],
    minSize: { width: 50, height: 50 },
  },
  embedding: {
    enabled: true,
    validateMagnet: (cell, magnet) => {
      if (magnet.getAttribute('port-group') === 'in') {
        return true;
      }
      return false;
    },
  },
  validateEmbedding: (child, parent) => {
    if (parent && parent.shape === 'group') {
      return parent.getBBox().containsRect(child.getBBox());
    }
    return true;
  },
  validateConnection: (sourceView, sourceMagnet, targetView, targetMagnet) => {
    if (!sourceMagnet || !targetMagnet) {
      return false;
    }
    if (sourceMagnet.getAttribute('port-group') !== targetMagnet.getAttribute('port-group')) {
      return true;
    }
    return false;
  },
  highlighting: {
    magnetAvailable: {
      name: 'stroke',
      args: {
        padding: 4,
        attrs: {
          strokeWidth: 3,
          stroke: '#1e90ff',
        },
      },
    },
    magnetAdsorbed: {
      name: 'stroke',
      args: {
        padding: 4,
        attrs: {
          strokeWidth: 3,
          stroke: '#1e90ff',
        },
      },
    },
  },
});

其中，`container` 属性是必须的，表示图形的容器。其他属性都是可选的。你可以根据需要选择需要的配置项。