G6 可解析 json 格式的数据。以下键名在 G6 中有特定含义，用户在设置自有数据时应避免使用 。用以下格式传入数据：

Graph

  1. {
  2.     nodes:[],
  3.     edges:[],
  4.     groups: [],
  5.     guides: []
  6. }

节点的数据模型

对所有图形有效

  1. {
  2.     id: 'node1',             // id 必须唯一
  3.     shape: 'circle',         // 所用图形
  4.     parent: 'group1',        // 所属组
  5.     index: 1                 // 渲染层级    
  6. }

仅对默认注册图形有效

  1. {
  2.     color: '#333',           // 颜色
  3.     size: 10 || [10, 10],    // 尺寸 || [宽, 高]
  4.     style: {                 // 关键形样式（优先级高于color）
  5.         fill: 'red',
  6.         stroke: 'blue'
  7.     },
  8.     label: '文本标签' || {     // 文本标签 || 文本图形配置
  9.         text: '文本标签',    
  10.         fill: 'green'
  11.     },
  12.     labelOffsetX,            // 文本标签 x 坐标偏移
  13.     labelOffsetY,            // 文本标签 y 坐标偏移
  14. }

边的数据模型

对所有图形有效

  1. {
  2.     id: 'edge1',           // id 必须唯一
  3.     source: 'node1',       // 源节点 id    
  4.     target: 'node2',       // 目标节点 id
  5.     controlPoints: [{      // 控制点
  6.         x: 10,
  7.         y: 10
  8.     }],
  9.     sourceAnchor: 0,       // 源节点锚点
  10.     targetAnchor: 2,       // 目标节点锚点
  11.     shape: 'line',         // 所用图形
  12.     index: 1               // 渲染层级
  13. }

仅对默认注册图形有效

  1. {
  2.     color: 'red',          // 颜色
  3.     size: 3,               // 尺寸
  4.     style: {               // 关键形样式（优先级高于color）
  5.         fill: 'red',
  6.         stroke: 'blue'
  7.     },
  8.     label: '文本标签' || {   // 文本标签 || 文本图形配置
  9.         text: '文本标签',
  10.         fill: 'green'
  11.     },
  12.     labelRectStyle: {      // 文本标签背景样式
  13.       fill: 'red'
  14.     },
  15.     labelOffsetX,            // 文本标签 x 坐标偏移
  16.     labelOffsetY,            // 文本标签 y 坐标偏移
  17. }

群组的数据模型

对所有图形有效

  1. {
  2.     id: 'group1',             // id 必须唯一
  3.     shape: 'rect',            // 所用图形
  4.     parent: 'group2',         // 所属组
  5.     index: 1                  // 渲染层级
  6. }

仅对默认注册图形有效

  1. {
  2.     color: '#333',           // 颜色
  3.     size: 10 || [10, 10],    // 尺寸 || [宽, 高]
  4.     style: {                 // 关键形样式（优先级高于color）
  5.         fill: 'red',
  6.         stroke: 'blue'
  7.     },
  8.     label: '文本标签' || {     // 文本标签 || 文本图形配置
  9.         text: '文本标签',
  10.         fill: 'green'
  11.     },
  12.     labelOffsetX,            // 文本标签 x 坐标偏移
  13.     labelOffsetY,            // 文本标签 y 坐标偏移
  14. }

导入数据

  1. const data = {
  2.     nodes: [{
  3.         id: 'node1',
  4.         x: 100,
  5.         y: 200
  6.     },{
  7.         id: 'node2',
  8.         x: 300,
  9.         y: 200
  10.     }],
  11.     edges: [{
  12.         id: 'edge1',
  13.         target: 'node2',
  14.         source: 'node1'
  15.     }]
  16. };
  17. const graph = new G6.Graph({
  18.     container: 'mountNode',
  19.     width: 500,
  20.     height: 500
  21. });
  22. graph.read(data);

Tree

对所有图形有效

  1. {
  2.   roots: [
  3.     {
  4.       id: 'root',                    // 根节点 id 
  5.       shape: 'circle',               // 图形
  6.       parent: 'parentId',            // 父节点 id
  7.       collapsed: false,              // 是否折叠
  8.       index: 1,                      // 渲染层级
  9.       children: [{                   // 子元素集 （子元素数据模型和根节点同构）
  10.         id: 'leaf',
  11.       }],
  12.     }
  13.   ]
  14. }

仅对默认注册图形有效

  1. {
  2.   roots: [
  3.     {
  4.       color: '#333',                 // 颜色 
  5.       size: 10 || [10, 10],          // 尺寸 || [宽, 高]
  6.       style: {                       // 样式 (优先级高于 color) 
  7.         fill: 'red',
  8.         stroke: 'blue'
  9.       },
  10.       label: '文本标签' || {           // 文本标签 || 文本图形配置
  11.         text: '文本标签',
  12.         fill: 'green'
  13.       },
  14.       labelOffsetX,            // 文本标签 x 坐标偏移
  15.       labelOffsetY,            // 文本标签 y 坐标偏移
  16.     }
  17.   ]
  18. }