{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-a24948befeef82fe6e1a9447a1629348-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

本文将进行 Tutorial案例的简单绘制和配置。通过本文，你将知道创建一般图时一些常用的配置项及其作用。

\n

基础绘制

\n

创建容器

\n

需要在 HTML 中创建一个用于容纳 G6 绘制的图的容器，通常为 div 标签。G6 在绘制时会在该容器下追加 canvas 标签，然后将图绘制在其中。

\n
<body>\n  <div id=\"mountNode\"></div>\n  \n  <!-- 引入 G6 -->\n  <!-- ... -->\n</body>
\n

数据准备

\n

引入 G6 的数据源为 JSON 格式的对象。该对象中需要有节点（nodes）和边（edges）字段，分别用数组表示：

\n
<script>\n  // console.log(G6.Global.version);\n  const initData = {\n    // 点集\n    nodes: [{\n      id: 'node1', // 节点的唯一标识\n      x: 100,      // 节点横坐标\n      y: 200,      // 节点纵坐标\n      label: '起始点' // 节点文本\n    },{\n      id: 'node2',\n      x: 300,\n      y: 200,\n      label: '目标点'\n   }],\n    // 边集\n    edges: [\n      // 表示一条从 node1 节点连接到 node2 节点的边\n      {\n        source: 'node1',  // 起始点 id\n        target: 'node2',  // 目标点 id\n        label: '我是连线'   // 边的文本\n      }\n    ]\n  };\n</script>
\n

 注意

\n\n

图实例化

\n

图实例化时，至少需要为图设置容器、宽、高：

\n
<script>\n  // const initData = { ... }\n  const graph = new G6.Graph({\n    container: 'mountNode', // 指定挂载容器\n    width: 800,             // 图的宽度\n    height: 500             // 图的高度\n  });\n</script>
\n

图的渲染

\n

数据的加载和图的渲染是两个步骤，可以分开进行。

\n
<script>\n  // const initData = { ... }\n  //  const graph = ...\n  graph.data(initData);  // 加载数据\n  graph.render();        // 渲染\n</script>
\n

绘制结果

\n

调用 graph.render() 方法之后，G6 引擎会根据加载的数据进行图的绘制。如果没有额外指定图实例的 renderer 属性配置，则默认采用 Canvas 进行绘制，结果如下：
\"image.png\"

\n

真实数据加载

\n

上文中，我们使用了仅含有两个节点和一条边的数据，直接将数据定义放在了代码中。而真实场景的数据通常是远程接口请求加载的。为了方便，我们已经给读者准备好了一份 json 数据文件，地址如下：
https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json

\n

加载远程数据

\n

修改 index.html，通过 fetch 函数异步加载远程的数据源，并传入 G6 的图实例中：

\n
<script>\n  //  const graph = ...\n  const main = async () => {\n    const response = await fetch('https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json');\n    const remoteData = await response.json();\n    \n    // ...\n    graph.data(remoteData); // 加载远程数据\n    graph.render();         // 渲染\n  };\n  main();\n</script>
\n
\n

fetch 函数允许我们发起网络请求，加载数据，而其异步的过程可以通过 async/await 进行更合理的控制。这里我们为了方便起见，将主要逻辑放在了 main 函数里面。如果读者对 fetch 和 async/await 的知识有疑问，可以参考：async function，Fetch API

\n
\n

运行后，我们得到了下图结果：
\"image.png\"
乍看之下，图像有点奇怪，实际上数据已经正确的加载了进来。由于数据量比较大，节点和边都非常的多，显得内容比较杂乱。另外由于画布大小的限制，实际的图被画布截断了，目前只能看见部分内容，这个问题后文会继续解决。

\n

请看下面摘取自 tutorial-data.json 的部分数据，我们发现数据中节点定义了位置信息 x 与 y，并且很多节点的 x 和 y 不在图的宽高（width: 800, height: 600）范围内：

\n
{\n  \"nodes\": [\n    {\"id\": \"0\", \"label\": \"n0\", \"class\": \"c0\",\"x\": 1000, \"y\": -100 },\n    {\"id\": \"1\", \"label\": \"n1\", \"class\": \"c0\",\"x\": 300, \"y\": -10 },\n    ...\n  ],\n  \"edges\": [\n    ...\n  ]\n}
\n

由于 G6 在读取数据时，发现了数据中带有位置信息（x 和 y），就会按照该位置信息进行绘制，这是为了满足按照原始数据绘制的需求设计的。但为优化超出屏幕到问题，G6 提供了图的两个相关配置项：

\n\n

我们将实例化图的代码更改为如下形式：

\n
const graph = new G6.Graph({\n  // ...\n  fitView: true,\n  fitViewPadding: [20, 40, 50, 20],\n});\n
\n

上述代码将会生成如下图：
\"image.png\"
可以看到，图像已经可以自动适配画布的大小，完整的显示了出来。

\n

*常用配置

\n

本文使用到的配置以及后续 Tutorial 将会使用到到常用配置如下：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
配置项类型选项 / 示例默认说明
rendererString'canvas' | 'svg''canvas'绘制图的方式是 canvas 还是 SVG。
fitViewBooleantrue | falsefalse是否将图适配到画布大小，可以防止超出画布或留白太多。
fitViewPaddingNumber | Array20 | [ 20, 40, 50, 20 ]0画布上的四周留白宽度。
animateBooleantrue | falsefalse是否启用图的动画。
modesObject{
  default: [ 'drag-node', 'drag-canvas' ]
}		null图上行为模式的集合。由于比较复杂，按需参见：G6 中的 mode。
defaultNodeObject{
  shape: 'circle',
  color: '#000',
  style: {
    ......
  }
}		null节点默认的属性，包括节点的一般属性和样式属性（style）。
defaultEdgeObject{
  shape: 'polyline',
  color: '#000',
  style: {
    ......
  }
}		null边默认的属性，包括边的一般属性和样式属性（style）。
nodeStateStylesObject{
  hover: {
    ......
  },
  select: {
    ......
  }
}		null节点在除默认状态外，其他状态下的样式属性（style）。例如鼠标放置（hover）、选中（select）等状态。
edgeStateStylesObject{
  hover: {
    ......
  },
  select: {
    ......
  }
}		null边在除默认状态外，其他状态下的样式属性（style）。例如鼠标放置（hover）、选中（select）等状态。
\n

完整代码

\n

至此，完整代码如下：

\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Tutorial Demo</title>\n</head>\n<body>\n  <div id=\"mountNode\"></div>\n  <script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js\"></script>\n  <script>\n    const graph = new G6.Graph({\n      container: 'mountNode',\n      width: 1000,\n      height: 600,\n      renderer: 'svg',\n      fitView: true,\n      fitViewPadding: [ 20, 40, 50, 20 ]\n    });\n\n    const main = async () => {\n      const response = await fetch('https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json');\n      const remoteData = await response.json();\n      graph.data(remoteData);\n      graph.render();\n    };\n    main();\n  </script>\n</body>\n</html>
\n

 注意 
若需更换数据，请替换 'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json' 为新的数据文件地址。

"}