图表交互

G2 默认内置的交互包括：

  • active 激活；
  • select 选中。

激活

开启以及关闭 shape 对于鼠标 hover 时的响应效果，G2 默认为各个 shape 内置了 active 效果。

  1. geom.active(false); // 关闭默认响应
  2. geom.active(true); // 开启默认响应

选中

各个几何标记 geom 选中的模式包含如下三种：

  • 不可选中；
  • 单选；
  • 多选；
  • 选中是否可取消选中。
    选中模式的设置方式如下：
  1. geom.select(false); // 关闭
  2. geom.select(true); // 打开
  3. geom.select([true,] {
  4.   mode: 'single' || 'multiple', // 选中模式，单选、多选
  5.   style: {}, // 选中后 shape 的样式
  6.   cancelable: true | false, // 选中之后是否允许取消选中，默认允许取消选中
  7.   animate: true | false // 选中是否执行动画，默认执行动画
  8. });

默认情况下，G2 中只有饼图支持选中交互，其他 geom 的选中模式默认情况下都是关闭的。

下面通过一个实例来演示选中 select(enable, cfg) 方法的使用。

示例：地图省市下钻

本例中的地图 GeoJSON 数据请访问该地址获取：

  1. <script src="https://a.alipayobjects.com/g/datavis/china-geojson/1.0.0/index.js"></script>

或者 github。

  1.   let provinceChart;
  2.   function processData(mapData) {
  3.     // 构造虚拟数据
  4.     const userData = [];
  5.     const features = mapData.features;
  6.     for (let i = 0; i < features.length; i++) {
  7.       const name = features[i].properties.name;
  8.       userData.push({
  9.         name: name,
  10.         value: Math.round(Math.random() * 1000),
  11.       });
  12.     }
  13.     const ds = new DataSet();
  14.     const geoDataView = ds.createView().source(mapData, {
  15.       type: 'GeoJSON',
  16.     }); // geoJSON 经纬度数据
  17.  
  18.     // 用户数据
  19.     const dvData = ds.createView().source(userData);
  20.     dvData.transform({
  21.       type: 'geo.region',
  22.       field: 'name',
  23.       geoDataView: geoDataView,
  24.       as: ['longitude', 'lantitude'],
  25.     });
  26.  
  27.     return dvData;
  28.   }
  29.  
  30.   function renderProvinceChart(name) {
  31.     const provinceData = ChinaGeoJSON[name];
  32.     provinceChart && provinceChart.destroy();
  33.     provinceChart = null;
  34.     if (!provinceData) {
  35.       return;
  36.     }
  37.     const dv = processData(provinceData);
  38.  
  39.     // start: 计算地图的最佳宽高
  40.     const longitudeRange = dv.range('longitude');
  41.     const lantitudeRange = dv.range('lantitude');
  42.     const ratio = (longitudeRange[1] - longitudeRange[0]) / (lantitudeRange[1] - lantitudeRange[0]);
  43.     let width;
  44.     let height;
  45.     if (ratio > 1) {
  46.       width = 450;
  47.       height = width / ratio;
  48.     } else {
  49.       width = 350 * ratio;
  50.       height = 350;
  51.     }
  52.     // end: 计算地图的最佳宽高
  53.  
  54.     provinceChart = new G2.Chart({
  55.       container: 'province',
  56.       width,
  57.       height,
  58.       padding: 0
  59.     });
  60.     provinceChart.source(dv);
  61.     provinceChart.axis(false);
  62.     provinceChart.tooltip({
  63.       showTitle: false,
  64.     });
  65.     provinceChart
  66.       .polygon()
  67.       .position('longitude*lantitude')
  68.       .label('name', {
  69.         textStyle: {
  70.           fill: '#fff',
  71.           fontSize: 10,
  72.           shadowBlur: 2,
  73.           shadowColor: 'rgba(0, 0, 0, .45)'
  74.         },
  75.       })
  76.       .style({
  77.         stroke: '#fff',
  78.         lineWidth: 1,
  79.       })
  80.       .color('value', '#BAE7FF-#1890FF-#0050B3');
  81.       provinceChart.render();
  82.   }
  83.  
  84.   const mapData = ChinaGeoJSON['China'];
  85.   const chinaDv = processData(mapData);
  86.   const longitudeRange = chinaDv.range('longitude');
  87.   const lantitudeRange = chinaDv.range('lantitude');
  88.   const ratio = (longitudeRange[1] - longitudeRange[0]) / (lantitudeRange[1] - lantitudeRange[0]);
  89.  
  90.   const chart = new G2.Chart({
  91.     container: 'china',
  92.     width: 250,
  93.     height: 250 / ratio,
  94.     padding: 0,
  95.     animate: false
  96.   });
  97.  
  98.   chart.source(chinaDv);
  99.   chart.tooltip({
  100.     showTitle: false,
  101.   });
  102.   chart.axis(false);
  103.   chart
  104.     .polygon()
  105.     .position('longitude*lantitude')
  106.     .tooltip('name')
  107.     .style({
  108.       stroke: '#bfbfbf',
  109.       lineWidth: 1,
  110.       fill: '#e3e3e3',
  111.       globalAlpha: 0.85,
  112.       cursor: 'pointer', // 设置鼠标手势
  113.     })
  114.     .select({
  115.       // 设置是否允许选中以及选中样式
  116.       mode: 'single', // 多选还是单选
  117.       style: {
  118.         fill: '#1890ff', // 选中的样式
  119.       },
  120.     });
  121.   chart.render();
  122.  
  123.   const shapes = chart.getAllGeoms()[0].getShapes();
  124.   for (let i = 0, len = shapes.length; i < len; i++) {
  125.     const shape = shapes[i];
  126.     const origin = shape.get('origin')['_origin'];
  127.     const name = origin.name;
  128.     if (name === '浙江') {
  129.       renderProvinceChart(name);
  130.       chart.getAllGeoms()[0].setShapeSelected(shape);
  131.     }
  132.   }
  133.  
  134.   chart.on('plotclick', function(ev) {
  135.     const shape = ev.shape;
  136.     if (!shape || !shape.name) {
  137.       return false;
  138.     }
  139.     if (shape.get('selected')) {
  140.       const item = shape.get('origin');
  141.       const data = item['_origin'];
  142.       const name = data.name;
  143.       renderProvinceChart(name);
  144.     } else {
  145.       provinceChart && provinceChart.clear();
  146.     }
  147.   });

Event 图表事件 Slider 数据滑动条

原文: https://antv.alipay.com/zh-cn/g2/3.x/tutorial/interaction.html