brush() creates two-dimensional brush
The brush() function creates a new two-dimensional brush for interactive selection.
d3-brush
19 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
brushX() creates one-dimensional x-axis brush
The brushX() function creates a new one-dimensional brush along the x-dimension.
brushY() creates one-dimensional y-axis brush
The brushY() function creates a new one-dimensional brush along the y-dimension.
brush(*group) applies brush to SVG G elements
The brush is applied to a specified group, which must be a selection of SVG G elements. This function is typically invoked via selection.call(). For example: svg.append('g').attr('class', 'brush').call(d3.brush().on('brush', brushed));
brush SVG structure for two-dimensional brush
A two-dimensional brush creates the following SVG structure: a parent g element with class 'brush', a rect with class 'overlay' covering the brushable area with cursor 'crosshair', a rect with class 'selection' showing the current selection with fill '#777' and fill-opacity 0.3, and eight handle rects with classes 'handle handle--n', 'handle handle--e', 'handle handle--s', 'handle handle--w', 'handle handle--nw', 'handle handle--ne', 'handle handle--se', and 'handle handle--sw' for resizing edges and corners.
brush.move(*group, *selection, *event) sets brush selection
The brush.move() method sets the active selection of the brush on the specified group (a selection or transition of SVG G elements). The selection must be defined as an array of numbers or null to clear. For a two-dimensional brush, it must be [[x0, y0], [x1, y1]]; for an x-brush, [x0, x1]; for a y-brush, [y0, y1]. The selection may also be specified as a function which is invoked for each selected element, receiving the current datum d and index i, with the current DOM element as the this context.
brush.clear(*group, *event) clears brush selection
The brush.clear() method is an alias for brush.move() with a null selection, clearing the brush selection.
brush.extent(*extent) sets brushable region
The brush.extent() method sets the brushable extent to a specified array of points [[x0, y0], [x1, y1]], where [x0, y0] is the top-left corner and [x1, y1] is the bottom-right corner. The extent may also be specified as a function invoked for each selected element, receiving the current datum d and index i, with the current DOM element as the this context. If not specified, returns the current extent accessor. The default implementation checks for a viewBox attribute on the owner SVG element, or uses the width and height attributes. The brush extent constrains the brush selection, which cannot go outside it.
brush.filter(*filter) sets which events trigger brushing
The brush.filter() method sets the filter to a specified function. If filter is not specified, returns the current filter, which defaults to: function filter(event) { return !event.ctrlKey && !event.button; }. If the filter returns falsey, the initiating event is ignored and no brush gesture is started. The default filter ignores mousedown events on secondary buttons.
brush.touchable(*touchable) enables touch support detection
The brush.touchable() method sets the touch support detector to a specified function. If not specified, returns the current detector, which defaults to: function touchable() { return navigator.maxTouchPoints || ('ontouchstart' in this); }. Touch event listeners are only registered if the detector returns truthy for the corresponding element when the brush is applied.
brush.keyModifiers(*modifiers) enables key event listening
The brush.keyModifiers() method sets whether the brush listens to key events during brushing. If not specified, returns the current behavior, which defaults to true.
brush.handleSize(*size) sets handle size
The brush.handleSize() method sets the size of the brush handles to the specified number. If not specified, returns the current handle size, which defaults to six. This method must be called before applying the brush to a selection.
brush.on(*typenames, *listener) registers brush event listeners
The brush.on() method registers event listeners for the specified typenames. If listener is null, removes current event listeners. If not specified, returns the first currently-assigned listener matching the specified typenames. Each listener is invoked with the same context and arguments as selection.on() listeners: the current event and datum d, with the current DOM element as the this context. The typenames is a string containing one or more typename separated by whitespace, with format 'type' or 'type.name'. The type must be one of: 'start' (at the start of a brush gesture), 'brush' (when the brush moves), or 'end' (at the end of a brush gesture).
brushSelection(*node) returns current brush selection
The brushSelection() function returns the current brush selection for the specified node. If the node has no selection, returns null. Otherwise, the selection is defined as an array of numbers. For a two-dimensional brush, it is [[x0, y0], [x1, y1]]; for an x-brush, [x0, x1]; for a y-brush, [y0, y1].
Brush event object fields
When a brush event listener is invoked, the event object exposes the following fields: target (the associated brush behavior), type (the string 'start', 'brush' or 'end'), selection (the current brush selection), sourceEvent (the underlying input event such as mousemove or touchmove), and mode (the string 'drag', 'space', 'handle' or 'center' indicating the mode of the brush).
Brush interactions: click and drag to define selection
Click and drag on the invisible overlay to define a new brush selection. Click and drag on the brush selection to translate it. Click and drag on selection handles to move the corresponding edges or corners.
Brush interactions: modifier keys
Holding down the META (⌘) key allows clicking anywhere within the brushable region to define a new brush selection. Holding down the ALT (⌥) key while moving the brush causes it to reposition around its center. Holding down SPACE locks the current brush size, allowing only translation.
Unbind brush event listeners
Brush event listeners bound with the name '.brush' can be subsequently unbound using group.on('.brush', null);
d3-brush module overview
d3-brush enables selecting one- or two-dimensional regions using mouse or touch input. It provides three main brush types (brush for 2D, brushX for x-dimension, brushY for y-dimension) with methods for moving, clearing, defining extent, filtering input events, and listening for brush events.