G2, starting from 4.0, implements all interactions using a new interaction syntax, which is no longer built-in by default and requires users to explicitly call chart.Interaction () interface. In order to help you better understand and use interactive syntax, we will publish a special topic on interactive syntax.

This article covers the most common interaction: box selection, including the shape of the box selection, the graphical changes during the box selection, and the various operations after the box selection.

Box to highlight the graph

 After selecting the box, drag the mask

 After the box is selected, filter data
After the box is selected, filter the graph

 Box selected shape selection

 Box selection linkage for multiple views

An overview of interactive syntax

G2’s interaction syntax is to break down interactions into multiple steps, each consisting of triggers and feedback. As long as you can describe the interaction in natural language, you can use G2’s interaction syntax to compose the interaction. Here we review the definition of interaction links in G2 interaction syntax. You can read visual interaction Syntax for more details.

G2 disassembs each interaction link into the following steps:

  • ShowEnable Indicates that the interaction can be performed.
  • 1. To start an interaction;
  • Processing: continuous interaction;
  • End: The interaction ends.
  • Rollback: Cancel the interaction and restore to the original state.

Let’s begin the assembly of interactive syntax for highlighted graphics. To help you understand each interaction, we will explain it in natural language + interactive syntax. We take the highlight of the bar chart as an example. In the process of interaction, we will use the built-in actions of G2. The definition and list of actions refer to G2 for configuring interaction.

Box to highlight the graph

The language description of the interaction

  1. The mouse becomes a cross when entering the drawing area, and returns to normal when leaving the drawing area;
  2. Press and drag the mouse to start box selection, the mask layer of box selection will appear, and the graph selected by the box will be highlighted during box selection.
  3. Release the mouse button, box selection end;
  4. Double click on the canvas to hide the mask layer and highlight the graphics.

G2 Interactive syntax

registerInteraction('element-range-highlight', {
  showEnable: [{trigger: 'plot:mouseenter'.action: 'cursor:crosshair' },
    { trigger: 'plot:mouseleave'.action: 'cursor:default'},].start: [{trigger: 'plot:mousedown'.action: ['rect-mask:start'.'rect-mask:show'],}],processing: [{trigger: 'plot:mousemove'.action: ['rect-mask:resize'.'element-range-highlight:highlight'],},],end: [{trigger: 'plot:mouseup'.action: ['rect-mask:end']},],rollback: [{trigger: 'dblclick'.action: ['element-range-highlight:clear'.'rect-mask:hide']]}});Copy the code

We use three actions to highlight this area:

  • cursorAction that controls mouse styles. This Action has methods that support all mouse styles, such as ‘pointer’, ‘crosshair’, ‘move’, etc.
  • rect-maskThis Action supports the following methods:
    • Start: indicates that the mask layer starts to change.
    • Show C.
    • Resize: to change shape;
    • Hide: hidden;
    • End: end.
  • element-range-highlightAreas of chart elements are highlighted by:
    • Highlight C.
    • Clear: Clears the highlight.

** Interactive syntax:

  • We used multiple steps to assemble the box highlight interaction:showEnableIt means whether the interaction can take place;startIndicates that the interaction has started.processingIndicates that the interaction continues;endIndicates that the interaction ends.rollbackIndicates an interactive rollback. These processes are not entirely sequential. For example, after the box selection is complete, a new box selection can be started without rollback.showEnableIt works at all stages.
  • You can change the implementation in any link, for example you can change the implementation inendAdd ‘rect-mask:hide’ to the action in the link. Then the mask disappears after the box selection, but the highlight effect of the box selection still exists.

After selecting the box, drag the mask

After highlighting the box selection we can start the new box selection, but the experience is better if we can drag and drop the mask layer to highlight the masked figure.

The language description of the interaction

The steps of this interaction are as follows:

  1. The mouse turns into a cross when the mouse enters the drawing area and returns to normal when the mouse leaves the drawing area.
  2. When the mouse enters the mask layer, the mouse becomes a move shape. When the mouse leaves the mask layer, the mouse becomes a cross.
  3. Press and move the mouse in a place other than the mask layer (drag and drop) to display the mask layer. During the drag and drop process, the mask layer changes with the mouse and the blocked graph is highlighted.
  4. Release the mouse box to select the end;
  5. When the mask layer is dragged, the mask layer moves with the mouse, and the blocked figure is highlighted;
  6. Release mouse drag mask layer end;
  7. Double-click on the canvas to hide the mask layer and cancel the highlight effect.

Note the difference between this interaction and the one above. Steps 2, 5 and 6 are added. Change 3 of the mask layer requires the addition of trigger conditions.

G2 Interactive syntax

registerInteraction('element-range-highlight', {
  showEnable: [{trigger: 'plot:mouseenter'.action: 'cursor:crosshair' },
    { trigger: 'mask:mouseenter'.action: 'cursor:move' },
    { trigger: 'plot:mouseleave'.action: 'cursor:default' },
    { trigger: 'mask:mouseleave'.action: 'cursor:crosshair'},].start: [{trigger: 'plot:mousedown',
      isEnable(context) { // Do not click to restart on mask
        return! context.isInShape('mask');
      },
      action: ['rect-mask:start'.'rect-mask:show'],}, {trigger: 'mask:dragstart'.action: ['rect-mask:moveStart']}],processing: [{trigger: 'plot:mousemove'.action: ['rect-mask:resize'],}, {trigger: 'mask:drag'.action: ['rect-mask:move'] {},trigger: 'mask:change'.action: ['element-range-highlight:highlight']}],end: [{trigger: 'plot:mouseup'.action: ['rect-mask:end'] {},trigger: 'mask:dragend'.action: ['rect-mask:moveEnd']},],rollback: [{ trigger: 'dblclick'.action: ['element-range-highlight:clear'.'rect-mask:hide']]}});Copy the code

We add new steps (trigger and feedback) one by one, depending on how this interaction differs from the previous one:

  • 2 * * in * *showEnableAdded mouse move mask and move mask effect.
  • 3 在 startIn the process of triggering the change of mask layer, the judgment whether it is triggered on the mask layer is added.
  • 5 在 startLink to add drag mask layer, inprocessingTo add mask layer movement, graphics based on mask layer changes to highlight steps.
  • 6 End the mask layer movement in the End segment.

Through this example, we can see how to extend an interaction. Box selection itself is not the purpose of the interaction, but the operation after box selection is the purpose of the interaction. After box selection, data filtering, detailed display, display and hiding can be carried out. The following are several interactions to illustrate.

After the box is selected, filter data

In order to make the user aware that the filtering has taken place and show the user how to recover, we display a reset button when the filtering has taken place.

The language description of the interaction

  1. When the mouse enters the drawing area, it becomes a cross. When the mouse leaves the drawing area, it returns to normal.
  2. Move the mouse pointer into the Reset button and it becomes a pointer. Move the mouse away and it becomes a cross.
  3. The mask layer appears when you drag the mouse. The mask layer changes during the dragging process.
  4. Release the mouse, filter the chart data, and display the Reset button;
  5. Click reset button to cancel data filtering.

G2 Interactive syntax

registerInteraction('brush', {
  showEnable: [{trigger: 'plot:mouseenter'.action: 'cursor:crosshair' },
    { trigger: 'plot:mouseleave'.action: 'cursor:default' },
    { trigger: 'reset-button:mouseenter'.action: 'cursor:pointer' },
    { trigger: 'reset-button:mouseleave'.action: 'cursor:crosshair'},].start: [{trigger: 'plot:mousedown'.action: ['brush:start'.'rect-mask:start'.'rect-mask:show'],},],processing: [{trigger: 'plot:mousemove'.action: ['rect-mask:resize'],},],end: [{trigger: 'plot:mouseup'.action: ['brush:filter'.'brush:end'.'rect-mask:end'.'rect-mask:hide'.'reset-button:show'],},],rollback: [{trigger: 'reset-button:click'.action: ['brush:reset'.'reset-button:hide'.'cursor:crosshair']]}});Copy the code

We use four actions to implement this area highlighting, cursor and rect-Mask have been described, here are the other two:

  • brushTo filter data by specifying a range, there are several methods:
    • Start Indicates the start position for filtering
    • End Indicates the position where filtering ends
    • The filter to filter
    • Reset Resume filtering
  • reset-buttonRestore button, only show and hide two methods:
    • Show show
    • Hide hide

** Several notes:

  • G2 provides basic button actions internally, from which all personalized buttons can be extended. In this example, Action (reset-button) is generated by modifying text and position.
  • The Action Brush determines the filter area by the start position and the end position. There are also two similar actions:
    • brush-xFilter only data within the X-axis range;
    • brush-yFilter only the data in the Y-axis range.

There are also two actions for rect-mask: X-rect-mask and Y-rect-mask.


After the box is selected, filter the graph

It is also common to only control the display and hiding of graphs without data filtering after box selection. Let’s take a look at the implementation of this interaction:

The language description of the interaction

  1. When the mouse enters the drawing area, it becomes a cross. When the mouse leaves the drawing area, it returns to normal.
  2. When the mouse is pressed down, the size of the mask layer changes in the dragging process, and the blocked figure is highlighted;
  3. Release the mouse, the blocked graph is reserved, other graphs are hidden;
  4. Double-click the canvas to unfilter the graphics.

G2 Interactive syntax

registerInteraction('brush-visible', {
  showEnable: [{trigger: 'plot:mouseenter'.action: 'cursor:crosshair' },
    { trigger: 'plot:mouseleave'.action: 'cursor:default'},].start: [{trigger: 'plot:mousedown'.action: ['rect-mask:start'.'rect-mask:show'.'element-range-highlight:start'],},],processing: [{trigger: 'plot:mousemove'.action: ['rect-mask:resize'.'element-range-highlight:highlight'],}, {trigger: 'mask:end'.action: ['element-filter:filter']}],end: [{trigger: 'plot:mouseup'.action: ['rect-mask:end'.'rect-mask:hide'.'element-range-highlight:end'.'element-range-highlight:clear'],},],rollback: [{trigger: 'dblclick'.action: ['element-filter:clear']}});Copy the code

The Action element filter is used as the cursor, rect-mask, and element-range-highlight actions. The Action element filter is used as the cursor, rect-mask, and element-range-highlight actions.

  • element-filter[8] : There are two methods for filtering chart elements:
    • Filter: filter
    • “Clear” : clears filtering

As we can see from the above interactions, multiple interactions share a large number of actions, which solves the problem of interaction code reuse and provides a guarantee for improving the efficiency and quality of interaction development.

extension

Box selected shape selection

The language description of the interaction

The steps for this interaction are similar to the previous ones, with the major difference that the mask layer shapes as the mouse drags over the canvas.

G2 Interactive syntax

registerInteraction('element-range-highlight', {
  showEnable: [{trigger: 'plot:mouseenter'.action: 'cursor:crosshair' },
    { trigger: 'mask:mouseenter'.action: 'cursor:move' },
    { trigger: 'plot:mouseleave'.action: 'cursor:default' },
    { trigger: 'mask:mouseleave'.action: 'cursor:crosshair'},].start: [{trigger: 'plot:mousedown',
      isEnable(context) { // Do not click to restart on mask
        return! context.isInShape('mask');
      },
      action: ['path-mask:start'.'path-mask:show'],}, {trigger: 'mask:dragstart'.action: ['path-mask:moveStart']}],processing: [{trigger: 'plot:mousemove'.action: ['path-mask:resize'],}, {trigger: 'mask:drag'.action: ['path-mask:move'] {},trigger: 'mask:change'.action: ['element-range-highlight:highlight'] {},trigger: 'mask:end'.action: ['element-filter:filter']}],end: [{trigger: 'plot:mouseup'.action: ['path-mask:end'] {},trigger: 'mask:dragend'.action: ['path-mask:moveEnd']},],rollback: [{trigger: 'dblclick'.action: ['element-range-highlight:clear'.'path-mask:hide'.'element-filter:clear']]}});Copy the code

This interaction is exactly the same as the “Action after box selection – Drag” above. This Action is exactly the same as the rect-mask method, except that the Action displaying the mask layer is replaced by the path-mask:

  • path-maskThis Action supports the following methods:
    • Start: indicates that the mask layer starts to change
    • Show: display
    • Resize: Changes the shape
    • Hide, hide
    • End of the end:

In addition to rect-mask and Path-mask, G2 also has two other circ-masks and smooth-path-mask built in, which provide exactly the same methods except for their different shapes.

Box selection linkage for multiple views

The language description of the interaction

  1. The mouse cursor changes to a cross when entering the drawing area of a View and returns to normal when leaving the drawing area of the View.
  2. Click the mouse to select the box, display the mask layer on the current View, and highlight the blocked graph; The graph corresponding to the data of the currently highlighted graph on other views is highlighted at the same time;
  3. Release the mouse, mask layer end change;
  4. Drag on the mask layer to highlight the blocked figure; The graph corresponding to the data of the currently highlighted graph on other views is highlighted at the same time;
  5. Release the mouse, the position change of mask layer ends;
  6. Double-click on the canvas to cancel the highlight effect.

G2 Interactive syntax

registerInteraction('highlight-view', {
  showEnable: [{trigger: 'plot:mouseenter'.action: 'cursor:crosshair' },
    { trigger: 'mask:mouseenter'.action: 'cursor:move' },
    { trigger: 'plot:mouseleave'.action: 'cursor:default' },
    { trigger: 'mask:mouseleave'.action: 'cursor:crosshair'},].start: [{trigger: 'plot:mousedown',isEnable(context) {
      return! context.isInShape('mask');
    }, action: ['rect-mask:start'.'rect-mask:show'] {},trigger: 'mask:dragstart'.action: 'rect-mask:moveStart'}].processing: [{trigger: 'plot:mousemove'.action: 'rect-mask:resize' },
    { trigger: 'mask:drag', isEnable(context) {
      return context.isInPlot();
    }, action: 'rect-mask:move'},
    { trigger: 'mask:change'.action: ['element-sibling-highlight:highlight'.'element-range-highlight:highlight']}],end: [{trigger: 'plot:mouseup'.action: 'rect-mask:end' },
    { trigger: 'mask:dragend'.action: 'rect-mask:moveEnd' },
    {
      trigger: 'document:mousedown',
      isEnable(context) {
        return! context.isInPlot(); },action: ['element-sibling-highlight:clear'.'element-range-highlight:clear'.'rect-mask:end'.'rect-mask:hide'].once: true}, {trigger: 'document:mouseup',
      isEnable(context) {
        return! context.isInPlot(); },action: ['rect-mask:end'].once: true,}],rollback: [{trigger: 'dblclick'.action: ['rect-mask:hide'.'element-sibling-highlight:clear'.'element-range-highlight:clear']}});Copy the code

This interaction is almost identical to the “box-selected operation-drag” mentioned above, except that the Action elemental-range-highlight method is also called at the same time. It means “highlight graphics” at the same time as “highlight graphics of all views of the same class”.

  • element-sibling-highlight[10] : Highlight the corresponding view of the current view at the same level.
    • Highlight: highlight
    • Clear: Clears the highlight

** More explanation: Careful readers may notice that several steps (triggering and feedback) occur in this interaction that were not present in the previous interaction. These are exception handling steps that affect the quality of an interaction:

  • document:mousedownEnd highlighting and hide the mask layer by pressing the mouse outside the drawing area (elsewhere on the surface).
  • document:mouseupLift the mouse outside the drawing area (other positions on the surface) to end the rect-mask change.
  • mask:dragIf the current View is no longer in the drawing area, it will not move.

In addition to linkage highlighting between multiple views, you can also perform linkage filtering, graph hiding, and tooltip linkage, which we’ll cover in a later chapter.

conclusion

Box highlighting is often used as an interaction in charts. The process and result of box highlighting may change in different scenarios. The traditional fixed interaction mode cannot meet the needs of users. Once we have interactive syntax, as long as you can list the steps of the interaction, you can translate those steps into interactive syntax naturally, efficiently and with high quality. Give it a try!

The url

G2 official website: G2.antv. vision/zh/

Making: github.com/antvis/G2

The resources

  1. Visual interactive syntax
  2. G2 has built-in interactive feedback
  3. cursor
  4. rect-mask
  5. element-highlight
  6. brush
  7. reset-button
  8. element-filter
  9. path-mask
  10. element-sibling-highlight