brush(group)
Applies the brush to the specified group, which must be a selection of SVG G elements. This function is typically not invoked directly, and is instead invoked via selection.call. For example, to render a brush:
svg.append("g")
.attr("class", "brush")
.call(d3.brush().on("brush", brushed));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);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>
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.
Please login to continue.