This is the 15th day of my participation in the First Challenge 2022

See the Data Visualization column for a series of articles

Operation brush selection

The brush picker is also an object with multiple methods for adding, deleting, and modifying selections:

  • Brush. Move (Group, Selection [, event]) sets the selection

    • The first argument, group, is the selection set to brush (usually containing a

      element/container)

    • The second argument selection represents a selection, which can be an array or NULL (an unselected element)

      If it is a two-dimensional brush picker, the array format is [[x0, y0], [x1, y1]] to represent the horizontal and vertical range of the selection. If it is an X-axis brush selector, the array format is [x0, x1] to represent the selected x-coordinate range; In the case of a Y-axis brush selector, the array is of the format [y0, y1] to represent the selected range of vertical axes

      💡 It can also be a function that returns an array or null to dynamically generate a selection depending on the situation. This function is called for each element in the selection set, passing two arguments in turn:

      • The data bound to the currently traversed element, datumd
      • Index of the currently traversed element in the selection seti

      The this inside the function refers to the element node being traversed

  • Brush. clear(group[, event]) is used to clear the selection, just like brush.move(group, null)

  • Brush.extent ([extent]) is used to set the brushable area. The brush selector creates an

    element acts as an overlay in response to the user’s brush operation.

    Its (optional) extent argument is an array of the format [[x0, y0], [x1, y1]]

    The 💡 parameter can also be a function that returns an array to dynamically generate a brushable region depending on the situation, which is also called for each element in the selection set, passing in two arguments in turn.

    💡 If no brushable region is set, the SVG size range is used as the default region

    function defaultExtent() {
  var svg = this.ownerSVGElement || this;
  if (svg.hasAttribute("viewBox")) {
    svg = svg.viewBox.baseVal;
    return [[svg.x, svg.y], [svg.x + svg.width, svg.y + svg.height]];
  }
  return [[0.0], [svg.width.baseVal.value, svg.height.baseVal.value]];
}
Copy the code

Constraints for

  • Brush. Filter ([filter]) is used to determine whether the brush operation is performed. The filter argument is a function that returns a Boolean value, accepts the current brush event as an argument, and ignores the brush when falsy is returned. It is used to limit certain conditions that do not respond to the brush operation.

    The default value of filter is as follows, so pressing Ctrl or using the secondary button of the mouse (for right-handed users, the secondary button usually refers to the right button of the mouse) in the brushable area by default does not allow brushable operations, because these operations are generally used for other purposes

    function filter(event) {
  // For the mouse set to right-handed operation
  // When left-clicking, event.button is 0
  // When using the right button, event.button is 2
  return! event.ctrlKey && ! event.button; }Copy the code

  • Touchable ([Touchable]) determines whether the browser supports touch. Touchable is a function that returns a Boolean value, and only if truthy is returned will a listener for the brush event be registered (by touch) in the element of the selection set

    The touchable parameter defaults to the following values

    function touchable() {
  return navigator.maxTouchPoints || ("ontouchstart" in this);
}
Copy the code

  • Brush. keyModifiers([modiFIERS]) to set whether to listen for keyboard keys when brushing. The parameter modiFIERS is a Boolean value, default to true, that allows a brush picker to listen for keyboard keystrokes as well as mouse actions, such as pressing Alt while swiping, which builds a selection that expands from the middle to the sides (similar to the logic used by selection tools in many graphic editing software).

  • HandleSize ([size]) sets the size of each handle in the selection. The default size is 6

    ⚠️ This method needs to be called before the brush selector is bound to the selection set

Handles the brush selection event

Brush. on(typenames[, listener]) sets listeners for brushing-related events for elements (

containers) in the selection set.

The first parameter typenames is the brush related event to listen for. D3 provides three brush related event types:

  • startEvents that are triggered at the start of the swipe (such as a mouse-down operation)
  • brushAn event that is triggered during a swipe, such as a mouse movement operation
  • endThe event that is triggered at the end of a swipe, such as releasing a key action

💡 can add the name name after the event and separate it with a., such as brush.on(‘brush.foo’, listener), so that multiple different handlers can be added through a brush event type

💡 If you want to remove listeners for brushing related events, you can set the corresponding event callback function to NULL

brush.on(".brush".null);
Copy the code

The second argument, listener, is an event handler that is called when the corresponding brush type event is triggered, passing two arguments in sequence:

  • Event Spawns an event object that exposes properties about the current spawns:

    • event.targetThe brush picker that currently triggers the brush pick event
    • event.typeThe current brush type can bestart,brush 或 end
    • event.selectionThe current selection, an array that represents the range of coordinates for the swiped region
    • event.modeThe current brush mode can bedrag(Moving selection),space(Press space bar to move selection),handleCreate a selection by box selection, or possibly adjust the selection by dragging the four corners or sides of the selectioncenter(hold downAltKey to create selection)

  • D The data datum bound to the element currently calling the zoomer