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

图的元素特指图上的节点Node和边Edge。在上一章节中，我们已经将Tutorial案例的图绘制了出来，但是各个元素及其 label 在视觉上很简陋。本文通过将上一章节中简陋的元素美化成如下效果，介绍元素的属性、配置方法。
\"image.png\"

\n
\n

图 1  元素属性配置后的 Tutorial案例。

\n
\n

基本概念

\n

图的元素

\n

图的元素特指图上的节点Node和边Edge。G6 内置了一系列 内置的节点 和内置的边，供用户自由选择。G6 不同的内置节点或不同的内置边主要区别在于元素的 图形Shape，例如，节点可以是圆形、矩形、图片等。如果 G6 内置的元素不能满足需求，用户也可以 自定义节点 或 自定义边。

\n

元素的属性

\n

不论是节点还是边，它们的属性分为两种：

\n\n

例如，G6 设定 hover 或 click 节点，造成节点状态的改变，只能自动改变节点的样式属性（如 fill、stroke 等），其他属性（如 shape 等）不能被改变。如果需要改变其他属性，要通过 graph.updateItem 手动配置。样式属性是一个名为 style 的对象， style 字段与其他属性并行。

\n

数据结构

\n

以节点元素为例，其属性的数据结构如下：

\n
{\n\tid: 'node0',          // 元素的 id\n  shape: 'circle',      // 元素的图形\n  size: 40,             // 元素的大小\n  label: 'node0'        // 标签文字\n  labelCfg: {           // 标签配置属性\n    positions: 'center',// 标签的属性，标签在元素中的位置\n    style: {            // 包裹标签样式属性的字段 style 与标签其他属性在数据结构上并行\n      fontSize: 12      // 标签的样式属性，文字字体大小\n    }\n  }\n  ...,                  // 其他属性\n  style: {              // 包裹样式属性的字段 style 与其他属性在数据结构上并行\n    fill: '#000',       // 样式属性，元素的填充色\n    stroke: '#888',     // 样式属性，元素的描边色\n    ...                 // 其他样式属性\n  }\n}
\n

边元素的属性数据结构与节点元素相似，只是其他属性中多了 source 和 target 字段，代表起始和终止节点的 id。
细化在图 1 中 Tutorial案例 的视觉需求，我们需要完成：

\n\n

配置属性

\n

在 G6 中，根据不同的场景需求，有 7 种配置元素属性的方式。这里，我们简单介绍其中的两种：

\n
    \n
  1. 实例化图时配置元素的全局属性；
    2. \n
  2. 在数据中配置。
    3. \n
\n

1. 实例化图时全局配置

\n

适用场景：所有节点统一的属性配置，所有边统一的属性配置。
使用方式：使用图的两个配置项：

\n\n

 注意 ：由于是统一的配置，不能根据数据中的属性（如 class、weight）等值的不同进行个性化设置，因此只能满足 R1、R2、R3、R4 需求。达到如下效果：
\"image.png\"

\n
\n

图 2  全局配置元素属性后的 Tutorial案例。

\n
\n


通过如下方式在实例化图时 defaultNode 和 defaultEdge ，可以完成上图效果：

\n
const graph = new G6.Graph({\n  // ...                   // 图的其他配置\n  // 节点在默认状态下的样式配置（style）和其他配置\n  defaultNode: {\n    size: 30, // 节点大小\n    // ...                 // 节点的其他配置\n    // 节点样式配置\n    style: {\n      fill: 'steelblue', // 节点填充色\n      stroke: '#666', // 节点描边色\n      lineWidth: 1, // 节点描边粗细\n    },\n    // 节点上的标签文本配置\n    labelCfg: {\n      // 节点上的标签文本样式配置\n      style: {\n        fill: '#fff', // 节点标签文字颜色\n      },\n    },\n  },\n  // 边在默认状态下的样式配置（style）和其他配置\n  defaultEdge: {\n    // ...                 // 边的其他配置\n    // 边样式配置\n    style: {\n      opacity: 0.6, // 边透明度\n      stroke: 'grey', // 边描边颜色\n    },\n    // 边上的标签文本配置\n    labelCfg: {\n      autoRotate: true, // 边上的标签文本根据边的方向旋转\n    },\n  },\n});\n
\n

2. 在数据中配置

\n

适用场景：不同节点/边可以有不同的个性化配置。
因此，这种配置方式可以满足 R5、R6 需求。
使用方式：可以直接将配置写入数据文件；也可以在读入数据后，通过遍历的方式写入配置。这里展示读入数据后，通过遍历的方式写入配置。下面代码展示了如何遍历数据进行属性的配置：

\n
const nodes = remoteData.nodes;\nnodes.forEach(node => {\n  if (!node.style) {\n    node.style = {};\n  }\n  switch (\n    node.class // 根据节点数据中的 class 属性配置图形\n  ) {\n    case 'c0': {\n      node.shape = 'circle'; // class = 'c0' 时节点图形为 circle\n      break;\n    }\n    case 'c1': {\n      node.shape = 'rect'; // class = 'c1' 时节点图形为 rect\n      node.size = [35, 20]; // class = 'c1' 时节点大小\n      break;\n    }\n    case 'c2': {\n      node.shape = 'ellipse'; // class = 'c1' 时节点图形为 ellipse\n      node.size = [35, 20]; // class = 'c2' 时节点大小\n      break;\n    }\n  }\n});\n\ngraph.data(remoteData);\n
\n

运行结果如下：
\"image.png\"

\n
\n

图 3

\n
\n

可以看到，图中有一些节点被渲染成了矩形，还有一些被渲染成了椭圆形。除了设置 shape 属性之外，我们还覆盖了上文全局配置的节点的 size 属性，在矩形和椭圆的情况下，size 是一个数组；而在默认圆形的情况下，G6 仍然会去读全局配置的 size 属性为数字 30。也就是说，动态配置属性让我们既可以根据数据的不同配置不同的属性值，也可以有能力覆盖全局静态的属性值。

\n

进一步地，我们尝试根据数据的比重不同，配置不一样边的粗细：

\n
// const nodes = ...\n\n// 遍历边数据\nconst edges = remoteData.edges;\nedges.forEach(edge => {\n  if (!edge.style) {\n    edge.style = {};\n  }\n  edge.style.lineWidth = edge.weight; // 边的粗细映射边数据中的 weight 属性数值\n});\n\ngraph.data(remoteData);\n
\n

结果如下：
\"image.png\"
如图所示，边的粗细已经按照数据的比重成功渲染了出来，但是边原有的样式（透明度、颜色）却丢失了。这是因为我们提到过动态配置属性会覆盖全局配置属性，这里配置了 style.lineWidth，导致覆盖了全局的 style 对象。解决办法是将被覆盖的边的样式都移到动态配置里面来：

\n
const graph = new G6.Graph({\n  // ...\n  defaultEdge: {\n    // 去掉全局配置的 style\n    labelCfg: {\n      // 边上的标签文本配置\n      autoRotate: true, // 边上的标签文本根据边的方向旋转\n    },\n  },\n});\n\n// 遍历点数据\n// const nodes = ...\n// nodes.forEach ...\n\n// 遍历边数据\nconst edges = remoteData.edges;\nedges.forEach(edge => {\n  if (!edge.style) {\n    edge.style = {};\n  }\n  edge.style.lineWidth = edge.weight; // 边的粗细映射边数据中的 weight 属性数值\n  // 移到此处\n  opt.style.opacity = 0.6;\n  opt.style.stroke = 'grey';\n});\n\ngraph.data(remoteData);\ngraph.render();\n
\n


再次渲染，结果如下：
\"image.png\"
\n
如图所示，边的透明度和颜色均渲染正确。

\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: 800,\n      height: 600,\n      fitView: true,\n      fitViewPadding: [ 20, 40, 50, 20 ],\n      defaultNode: {\n        size: 30,\n        labelCfg: {\n          style: {\n            fill: '#fff'\n          }\n        }\n      },\n      defaultEdge: {\n        labelCfg: {\n          autoRotate: true\n        }\n      },\n    });\n\t\tconst main = async () => {\n      const response = await fetch(\n        'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'\n      );\n      const remoteData = await response.json();\n      const nodes = remoteData.nodes;\n      const edges = remoteData.edges;\n      nodes.forEach(node => {\n        if (!node.style) {\n          node.style = {};\n        }\n        node.style.lineWidth = 1;\n        node.style.stroke = '#666';\n        node.style.fill = 'steelblue';\n        switch (node.class) {\n          case 'c0': {\n            node.shape = 'circle';\n            break;\n          }\n          case 'c1': {\n            node.shape = 'rect';\n            node.size = [ 35, 20 ];\n            break;\n          }\n          case 'c2': {\n            node.shape = 'ellipse';\n            node.size = [ 35, 20 ];\n            break;\n          }\n        }\n      });\n      edges.forEach(edge => {\n        if (!edge.style) {\n          edge.style = {};\n        }\n        edge.style.lineWidth = edge.weight;\n        edge.style.opacity = 0.6;\n        edge.style.stroke = 'grey';\n      });\n\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' 为新的数据文件地址。

"}