Implements interactive resizing of a selection starting with mousedown events. Register this behavior on selection handles that should be resizeable by the user, such for brushing and linking. This behavior can be used in tandom with pv.Behavior.select and pv.Behavior.drag to allow the selected region to be selected and dragged interactively.
After the initial mousedown event is triggered, this behavior listens for mousemove and mouseup events on the window. This allows resizing to continue even if the mouse temporarily leaves the assigned panel, or even the root panel.
This behavior requires that the data associated with the mark being resized have x, y, dx and dy attributes that correspond to the mark's location and dimensions in pixels. The mark's positional properties are not set directly by this behavior; instead, the positional properties should be defined as:
.left(function(d) d.x) .top(function(d) d.y) .width(function(d) d.dx) .height(function(d) d.dy)Thus, the behavior does not resize the mark directly, but instead updates the size by updating the assigned panel's underlying data. Note that if the positional properties are defined with bottom and right (rather than top and left), the resize behavior will be inverted, which will confuse users!
The resize behavior is bounded by the assigned mark's enclosing panel; the positional attributes are clamped such that the selection does not extend outside the panel's bounds.
The mark being resized is automatically re-rendered for each mouse event as part of the resize operation. This behavior may be enhanced in the future to allow more flexible configuration. In some cases, such as with parallel coordinates, resizing the selection may cause related marks to change, in which case additional marks may also need to be rendered. This can be accomplished by listening for the select psuedo-events:
- resizestart (on mousedown)
- resize (on mousemove)
- resizeend (on mouseup)
.event("mousedown", pv.Behavior.resize("left")) .event("resize", function() this.parent)This behavior may be enhanced in the future to allow more flexible configuration of the selection behavior.
Defined in: Resize.js.
|Constructor Attributes||Constructor Name and Description|
Returns a new resize behavior to be registered on mousedown events.