简介

plugins.tool.mapper 将图中的某一通道通过 @antv/scale 的某种变换后，映射到 @antv/g2/src/component/legend 提供的图例上，并且在图例的交互中可以对图上元素进行筛选。
映射器 plugins.tool.mapper - 图1

安装

在 HTML 中引用文件：

  1. <script src="https://unpkg.com/@antv/g6/build/plugin.tool.mapper.js"></script>

在 npm 中引用：

  1. import '@antv/g6/build/plugin.tool.mapper';

参数

参数 说明 类型 默认值
itemType 映射对象类型，’node’ / ‘edge’。 string null
dim 映射对象的维度，该维度存在与原始数据当中。e.g. ‘class’, ‘weight’。 string null
range 映射后的值域。e.g. [0, 1], [‘#BAE7FF’, ‘#1890FF’, ‘#0050B3’]。 array [0, 1]
channel 视觉通道。e.g. ‘size’, ‘color’。 string null
otherCfg legend 和 scale 的配置项。legendCfg 为 null 时不显示图例。 array
legendCfg legendTitle 图例的标题。 string
lengedLayout 图例的布局方式。’horizontal’ / ‘vertical’。 string ‘horizontal’
legendWidth 图例的宽。 number 150 或 15
legendHeight 图例的高。 number 15 或150
formatter 图例中数字到文字的转换。默认显示原始数值。 funcion null
scaleCfg type 被映射数值的变换形式。’Linear’ / ‘Log’ / ‘Pow’。 string ‘Linear’

使用

实例化插件对象:

  1. const Mapper = G6.Plugins['tool.mapper'];
  2. const nodeColorMapper = new Mapper('node', 'class', 'color', ['#BAE7FF', '#0050B3'], {
  3.   legendCfg: {
  4.     layout: 'vertical',
  5.     legendWidth: 200
  6.   }
  7. });
  8. const nodeSizeMapper = new Mapper('node', 'weight', 'size', [10, 50], {
  9.   legendCfg: {
  10.     layout: 'horizontal',
  11.     formatter: function(num) {
  12.         return num + ' apples'
  13.     }
  14.   },
  15.   scaleCfg: {
  16.     type: 'log'
  17.   }
  18. });
  19. const edgeSizeMapper = new Mapper('edge', 'weight', 'size', [2, 20], {
  20.   legendCfg: null // no legend
  21. });

在实例化 Graph 时作为插件插入:

  1. const graph = new G6.Graph({
  2.       container: 'mountNode',
  3.       plugins: [ nodeColorMapper, nodeSizeMapper, edgeSizeMapper ]
  4.     });