d3-brush
刷选是一种使用指点手势（例如点击和拖动鼠标）对一维或二维选定区域进行交互式指定的方法。刷选通常用于选择离散元素，例如散点图中的点或桌面上的文件。它也可以用于放大感兴趣的区域，或用于选择连续区域以进行交叉过滤数据或实时直方图:
🌐 Brushing is the interactive specification a one- or two-dimensional selected region using a pointing gesture, such as by clicking and dragging the mouse. Brushing is often used to select discrete elements, such as dots in a scatterplot or files on a desktop. It can also be used to zoom-in to a region of interest, or to select continuous regions for cross-filtering data or live histograms:
d3-brush 模块使用 SVG 实现鼠标和触摸事件的刷选。点击并拖动刷选区域可以平移该选择。点击并拖动选择框的一个控制点可以移动该选择的对应边界（或边界）。点击并拖动不可见的覆盖层可以定义一个新的刷选区域，或者在按住 META (⌘) 键的情况下点击刷选区域内的任意位置。在移动刷选区域时按住 ALT (⌥) 键会使其围绕中心重新定位，而按住 SPACE 键会锁定当前刷选大小，只允许平移。
🌐 The d3-brush module implements brushing for mouse and touch events using SVG. Click and drag on the brush selection to translate the selection. Click and drag on one of the selection handles to move the corresponding edge (or edges) of the selection. Click and drag on the invisible overlay to define a new brush selection, or click anywhere within the brushable region while holding down the META (⌘) key. Holding down the ALT (⌥) key while moving the brush causes it to reposition around its center, while holding down SPACE locks the current brush size, allowing only translation.
画刷还支持编程控制。例如，你可以监听 end 事件，然后使用 brush.move 发起过渡，将画刷选择捕捉到语义边界：
🌐 Brushes also support programmatic control. For example, you can listen to end events, and then initiate a transition with brush.move to snap the brush selection to semantic boundaries:
或者，当你点击当前选择范围之外的区域时，可以让画笔重新居中：
🌐 Or you can have the brush recenter when you click outside the current selection:
刷子()
🌐 brush()
brushX()
brushY()
来源 · 沿 y 维度创建一个新的单维画刷。
刷(组)
🌐 brush(group)
示例 · 来源 · 将画笔应用于指定的组，该组必须是 SVG G 元素 的选择。此函数通常不会被直接调用，而是通过 selection.call 调用。例如，要渲染一个画笔:
svg.append("g")
.attr("class", "brush")
.call(d3.brush().on("brush", brushed));在内部，画笔使用 selection.on 来绑定拖动所需的事件监听器。监听器使用名称 .brush，所以你可以随后按如下方式解绑画笔事件监听器：
🌐 Internally, the brush uses selection.on to bind the necessary event listeners for dragging. The listeners use the name .brush, so you can subsequently unbind the brush event listeners as follows:
group.on(".brush", null);画刷还会创建显示画刷选择所需的 SVG 元素，并接收用于交互的输入事件。你可以根据需要添加、删除或修改这些元素以改变画刷的外观；你也可以应用样式表来修改画刷的外观。二维画刷的结构如下：
🌐 The brush also creates the SVG elements necessary to display the brush selection and to receive input events for interaction. You can add, remove or modify these elements as desired to change the brush appearance; you can also apply stylesheets to modify the brush appearance. The structure of a two-dimensional brush is as follows:
<g class="brush" fill="none" pointer-events="all" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<rect class="overlay" pointer-events="all" cursor="crosshair" x="0" y="0" width="960" height="500"></rect>
<rect class="selection" cursor="move" fill="#777" fill-opacity="0.3" stroke="#fff" shape-rendering="crispEdges" x="112" y="194" width="182" height="83"></rect>
<rect class="handle handle--n" cursor="ns-resize" x="107" y="189" width="192" height="10"></rect>
<rect class="handle handle--e" cursor="ew-resize" x="289" y="189" width="10" height="93"></rect>
<rect class="handle handle--s" cursor="ns-resize" x="107" y="272" width="192" height="10"></rect>
<rect class="handle handle--w" cursor="ew-resize" x="107" y="189" width="10" height="93"></rect>
<rect class="handle handle--nw" cursor="nwse-resize" x="107" y="189" width="10" height="10"></rect>
<rect class="handle handle--ne" cursor="nesw-resize" x="289" y="189" width="10" height="10"></rect>
<rect class="handle handle--se" cursor="nwse-resize" x="289" y="272" width="10" height="10"></rect>
<rect class="handle handle--sw" cursor="nesw-resize" x="107" y="272" width="10" height="10"></rect>
</g>覆盖矩形覆盖由 brush.extent 定义的可刷区域。选择矩形覆盖由当前 brush selection 定义的区域。句柄矩形覆盖刷选择的边缘和角落，允许交互式修改刷选择中的相应值。要以编程方式修改刷选择，请使用 brush.move。
🌐 The overlay rect covers the brushable area defined by brush.extent. The selection rect covers the area defined by the current brush selection. The handle rects cover the edges and corners of the brush selection, allowing the corresponding value in the brush selection to be modified interactively. To modify the brush selection programmatically, use brush.move.
brush.move(group, selection, event)
示例 · 来源 · 设置指定组上画刷的活动选择，该组必须是 SVG G 元素 的选择或过渡。选择必须定义为数字数组，或者为 null 以清除画刷选择。对于二维画刷，它必须定义为[[x0, y0], [x1, y1]]，其中 x0 是最小的 x 值，y0 是最小的 y 值，x1 是最大 x 值，y1 是最大 y 值。对于x 画刷，它必须定义为 [x0, x1]；对于y 画刷，它必须定义为 [y0, y1]。选择也可以指定为返回此类数组的函数；如果是函数，它会为每个选中的元素调用，传入当前数据 d 和索引 i，上下文 this 为当前 DOM 元素。返回的数组定义该元素的画刷选择。
brush.clear(group, event)
示例 · 来源 · 带空选择的 brush.move 的别名。
brush.extent(extent)
示例 · 来源 · 如果指定了extent，则将可刷选的范围设置为指定的点数组 [[x0, y0], [x1, y1]]，其中 [x0, y0] 是左上角，[x1, y1] 是右下角，并返回该刷子。extent 也可以指定为返回此类数组的函数；如果是函数，则为每个选定元素调用该函数，传入当前数据 d 和索引 i，并以 this 作为当前 DOM 元素的上下文。如果未指定extent，则返回当前范围访问器，默认值为:
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]];
}这个默认实现要求拥有者 SVG 元素必须定义 viewBox 属性，或者定义 width 和 height 属性。或者，可以考虑使用 element.getBoundingClientRect。(在 Firefox 中，SVG 元素的 element.clientWidth 和 element.clientHeight 为零！)
🌐 This default implementation requires that the owner SVG element have a defined viewBox, or width and height attributes. Alternatively, consider using element.getBoundingClientRect. (In Firefox, element.clientWidth and element.clientHeight is zero for SVG elements!)
画笔范围决定了不可见覆盖层的大小，同时也限制了画笔选择；画笔选择不能超出画笔范围。
🌐 The brush extent determines the size of the invisible overlay and also constrains the brush selection; the brush selection cannot go outside the brush extent.
brush.filter(filter)
示例 · 来源 · 如果指定了 filter，则将过滤器设置为指定的函数并返回刷子。如果未指定 filter，则返回当前过滤器，默认值为:
function filter(event) {
return !event.ctrlKey && !event.button;
}如果过滤器返回假值，则启动事件将被忽略，并且不会开始刷选手势。因此，过滤器决定哪些输入事件会被忽略。默认过滤器会忽略次要按钮的鼠标按下事件，因为这些按钮通常用于其他用途，例如上下文菜单。
🌐 If the filter returns falsey, the initiating event is ignored and no brush gesture is started. Thus, the filter determines which input events are ignored. The default filter ignores mousedown events on secondary buttons, since those buttons are typically intended for other purposes, such as the context menu.
刷子.可触摸(可触摸)
🌐 brush.touchable(touchable)
来源 · 如果指定了 touchable，则将触摸支持检测器设置为指定的函数并返回画笔。如果未指定 touchable，则返回当前的触摸支持检测器，默认值为：
function touchable() {
return navigator.maxTouchPoints || ("ontouchstart" in this);
}只有在检测器在刷子应用时对相应元素返回真值时，才会注册触摸事件监听器。默认的检测器对于大多数能够进行触摸输入的浏览器都能很好地工作，但并非全部；例如，Chrome 的移动设备模拟器就无法通过检测。
🌐 Touch event listeners are only registered if the detector returns truthy for the corresponding element when the brush is applied. The default detector works well for most browsers that are capable of touch input, but not all; Chrome’s mobile device emulator, for example, fails detection.
brush.keyModifiers(modifiers)
来源 · 如果指定了 modifiers，则设置刷子在刷选过程中是否监听键盘事件，并返回该刷子。如果未指定 modifiers，则返回当前行为，默认值为 true。
brush.handleSize(size)
来源 · 如果指定了 size，则将画笔句柄的大小设置为指定的数字，并返回画笔。如果未指定 size，则返回当前的句柄大小，默认值为六。此方法必须在将画笔应用于选区之前调用；更改句柄大小不会影响之前已渲染的画笔。
brush.on(typenames, listener)
来源 · 如果指定了 listener，则为指定的 typenames 设置事件 listener 并返回画笔。如果相同类型和名称已经注册了事件监听器，则在添加新监听器之前会移除现有的监听器。如果 listener 为 null，则移除指定 typenames 的当前事件监听器（如果有的话）。如果未指定 listener，则返回与指定 typenames 匹配的第一个当前分配的监听器（如果有的话）。当分发指定事件时，每个 listener 都将以与 selection.on 监听器相同的上下文和参数被调用：当前事件 event 和数据项 d，并以 this 上下文作为当前 DOM 元素。
typenames 是一个包含一个或多个 typename 的字符串，它们由空格分隔。每个 typename 是一个 type，可选地后跟一个句点（.）和一个 name，例如 brush.foo 和 brush.bar；该名称允许为相同的 type 注册多个监听器。type 必须是以下之一：
🌐 The typenames is a string containing one or more typename separated by whitespace. Each typename is a type, optionally followed by a period (.) and a name, such as brush.foo and brush.bar; the name allows multiple listeners to be registered for the same type. The type must be one of the following:
start- 在画笔手势开始时，例如鼠标按下时。brush- 当画笔移动时，例如鼠标移动时。end- 在画笔手势结束时，例如鼠标释放时。
请参阅 dispatch.on 和 brush events 了解更多信息。
🌐 See dispatch.on and brush events for more.
刷选(节点)
🌐 brushSelection(node)
示例 · 来源 · 返回指定 节点 的当前刷选范围。在内部，一个元素的刷选状态存储为 element.__brush；然而，你应该使用此方法而不是直接访问它。如果给定的 节点 没有选择，则返回 null。否则，selection 被定义为数字数组。对于二维刷，它是 [[x0, y0], [x1, y1]]，其中 x0 是最小的 x 值，y0 是最小的 y 值，x1 是最大的 x 值，y1 是最大的 y 值。对于 x 刷，它是 [x0, x1]；对于 y 刷，它是 [y0, y1]。
画笔事件
🌐 Brush events
当调用刷子事件监听器时，它会接收到当前的刷子事件。event 对象公开了几个字段：
🌐 When a brush event listener is invoked, it receives the current brush event. The event object exposes several fields: