🍒 Cherry的博客

Appearance

AntV G6 ​

G6 图可视化引擎

图配置项 ​

G6 图实例的配置项是控制图外观和行为的关键，涵盖了画布设置、视口属性、数据、布局、样式、交互行为和插件等多方面。这些配置项既可在创建图实例时指定，也可通过 API 在运行时动态修改。以下是对 G6 图配置项的详细总结：

1. 基础配置 ​

  • container：指定图的容器，可以是 DOM 元素的 ID、DOM 元素本身或 Canvas 实例。
  • width 和 height：设置画布的宽度和高度，如果未设置，则自动获取容器的尺寸。
  • fitView：是否将图适配到画布大小，防止内容溢出或留白过多。
  • devicePixelRatio：设备像素比，用于高清屏的设备像素比，默认为window.devicePixelRatio。
  • cursor：鼠标悬停时的光标样式，支持多种 CSS 光标值。
  • background：画布背景色。
  • renderer：指定渲染器，可以是canvas或svg。

2. 节点配置 (node) ​

  • type：节点类型，如circle、rect等。
  • style：节点的样式配置，包括填充色、边框色、边框宽度、半径等。
  • labelCfg：节点标签的配置，如文本内容、样式、位置等。
  • state：节点的状态样式，如hover（悬停）、selected（选中）等。

示例：

javascript
const graph = new Graph({
  node: {
    type: 'circle',
    style: {
      fill: '#e6f7ff',
      stroke: '#91d5ff',
      lineWidth: 1,
      r: 20,
    },
    labelText: (d) => d.id,
    state: {
      hover: {
        lineWidth: 2,
        stroke: '#69c0ff',
      },
      selected: {
        fill: '#bae7ff',
        stroke: '#1890ff',
        lineWidth: 2,
      },
    },
  },
})

3. 边配置 (edge) ​

  • type：边的类型，如polyline、line等。
  • style：边的样式配置，包括颜色、宽度、箭头等。
  • state：边的状态样式，如hover、selected等。

示例：

javascript
const graph = new Graph({
  edge: {
    type: 'polyline',
    style: {
      stroke: '#91d5ff',
      lineWidth: 2,
      endArrow: true,
    },
    state: {
      selected: {
        stroke: '#1890ff',
        lineWidth: 3,
      },
    },
  },
})

4. 布局配置 (layout) ​

  • type：布局类型，如force（力导向）、radial（辐射形）、circular（环形）等。
  • preventOverlap：是否防止节点重叠。
  • iterations：布局的迭代次数。
  • animation：是否启用布局动画。

示例：

javascript
const graph = new Graph({
  layout: {
    type: 'force',
    preventOverlap: true,
    iterations: 200,
    animation: true,
  },
})

5. 主题配置 (theme) ​

  • theme：设置图表的主题，可以是内置的'light'、'dark'，也可以是自定义主题的名称。

示例：

javascript
const graph = new Graph({
  theme: 'dark',
})

6. 交互行为 (behaviors) ​

  • drag-canvas：允许拖拽画布。
  • zoom-canvas：允许缩放画布。
  • drag-element：允许拖拽节点或边。
  • hover-activate：悬停激活效果。

示例：

javascript
const graph = new Graph({
  behaviors: [
    'drag-canvas',
    'zoom-canvas',
    { type: 'drag-element', enable: (event) => event.targetType === 'node' },
  ],
})

7. 插件配置 (plugins) ​

  • minimap：小地图插件，用于快速预览和探索图表。
  • grid：网格背景插件。
  • toolbar：工具栏插件，提供操作按钮。

示例：

javascript
const graph = new Graph({
  plugins: [
    'minimap',
    { type: 'grid', line: { stroke: '#d9d9d9', lineWidth: 1 } },
    { type: 'toolbar', position: 'top-right' },
  ],
})

8. 数据转换 (transforms) ​

  • process-parallel-edges：处理平行边。
  • map-node-size：根据节点数据映射节点大小。

示例：

javascript
const graph = new Graph({
  transforms: [
    'process-parallel-edges',
    { type: 'map-node-size', field: 'value', max: 50, min: 20 },
  ],
})

9. 其他配置 ​

  • padding：画布四周的内边距。
  • rotation：旋转角度（以弧度为单位）。
  • viewportX 和 viewportY：视口的初始位置。
  • scale：视口的初始缩放级别。
  • zoomMin 和 zoomMax：缩放范围，限制用户可以缩放的最小和最大比例。

10. 获取和更新配置 ​

  • getOptions()：获取当前图表的配置项。
  • setOptions()：更新图表的配置项，需传入新的GraphOptions对象作为参数。

示例：

javascript
// 获取当前配置
const options = graph.getOptions()

// 更新配置
graph.setOptions({
  node: {
    style: {
      fill: '#f00',
    },
  },
})

以上是 G6 图配置项的详细总结，涵盖了从基础设置到高级功能的各个方面。希望对你有所帮助！