容器的交互

Chart

支持的交互

• 自适应宽度

  Action

class ChartResize extends Action() {
    forceFit() {
      const context = this.context;
    const chart = context.chart;
    chart.forceFit();
  }
}

语法

G2.RegisterInteraction({
    start: [
    {trigger: 'widown:resize', action: 'chart-resize:forceFit'},
    {trigger: 'container:resize', action: 'chart-resize:forceFit'}
  ]
})

View

支持的交互

• 显示、隐藏
• 调整宽度
• 调整位置
• 内部平移、缩放

  Action

  ```javascript class ViewAction extends Action { show() {} hide() {} }

class ViewDelegation extends Action { showDelegation() {} changeDelegation() {} hideDelegation() {} }

class ViewResize extends Action { showEnable() {} hideEnable() {} start() {} resize() {} }

class ViewPosition extends Action { showEnable() {} hideEnable() {} start() {} move() {} }

class ViewTranslate extends Action { start() {} translate(){} reset(){} }

class ViewScale extends Action { scale() {} reset() {} }

<a name="SUAQz"></a>
### 语法
拖拽改变 view 的大小
```javascript
G2.RegisterInteraction('view-resize', {
    showEnable: [
    {trigger: 'view:plotenter', action: 'view-resize:showEnable'},
    {trigger: 'view:plotleave', action: 'view-resize:hideEnable'}
  ],
  start: [
    {trigger: 'view-resize-icon:dragstart', action: 'view-resize:start'},
    {trigger: 'view-resize-icon:dragstart', action: 'view-delegation:show'}
  ],
  processing: [
    {trigger: 'view-resize-icon:drag', action: 'view-delegation:change'}
  ],
  end: [
      {trigger: 'view-resize-icon:dragend', action: 'view-delegation:hide'},
    {trigger: 'view-resize-icon:dragend', action: 'view-resize:resize'},
  ],
  rollback: [
    {trigger: 'view-resize-icon:dblclick', action: 'view-resize:reset'}
  ]
});

拖拽改变 view 的位置

G2.RegisterInteraction('view-move', {
    showEnable: [
    {trigger: 'view:plotenter', action: 'view-position:showEnable'},
    {trigger: 'view:plotleave', action: 'view-position:hideEnable'}
  ],
  start: [
    {trigger: 'view-resize-icon:dragstart', action: 'view-position:start'},
    {trigger: 'view-resize-icon:dragstart', action: 'view-delegation:show'}
  ],
  processing: [
    {trigger: 'view-resize-icon:drag', action: 'view-delegation:change'}
  ],
  end: [
      {trigger: 'view-resize-icon:dragend', action: 'view-delegation:hide'},
    {trigger: 'view-resize-icon:dragend', action: 'view-position:move'},
  ],
  rollback: [
    {trigger: 'view-resize-icon:dblclick', action: 'view-position:reset'}
  ]
});

拖拽 view 内部平移

G2.RegisterInteraction('view-translate', {
    showEnable: [
    {trigger: 'view:plotenter', action: 'cursor:move'},
    {trigger: 'view:plotleave', action: 'cursor:default'}
  ],
  start: [
    {trigger: 'view:mousedown', action: 'view-translate:start'},
  ],
  processing: [
    {trigger: 'view:mousemove', action: 'view-translate:translate'},
  ],
  end: [
      {trigger: 'view:mouseup'},
  ],
  rollback: [
    {trigger: 'view:dblclick', action: 'view-translate:reset'}
  ]
});

滚轮 view 内部缩放

G2.RegisterInteraction('view-scale', {
  start: [
    {trigger: 'view:scroll', action: 'view-scale:scale'},
  ],
  rollback: [
    {trigger: 'view:dblclick', action: 'view-scale:reset'}
  ]
});

Geometry

支持的交互

Geometry 在 G2 中是 Elements 的集合，支持的交互有：

• 显示、隐藏

  Action

  class GeometryAction extends Action {
  change() {}
  show() {}
  hide() {}
  }

语法

G2.RegisterInteraction('view-scale', {
  start: [
    {trigger: 'legend-item:checkchanged', action: 'geometry:change'},
  ]
});