Class Index | File Index


Class pv.Behavior.drag

Extends pv.Behavior.
Implements interactive dragging starting with mousedown events. Register this behavior on marks that should be draggable by the user, such as the selected region for brushing and linking. This behavior can be used in tandom with to allow the selected region to be dragged interactively.

After the initial mousedown event is triggered, this behavior listens for mousemove and mouseup events on the window. This allows dragging to continue even if the mouse temporarily leaves the mark that is being dragged, or even the root panel.

This behavior requires that the data associated with the mark being dragged have x and y attributes that correspond to the mark's location 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)
Thus, the behavior does not move the mark directly, but instead updates the mark position by updating the underlying data. Note that if the positional properties are defined with bottom and right (rather than top and left), the drag behavior will be inverted, which will confuse users!

The drag behavior is bounded by the parent panel; the x and y attributes are clamped such that the mark being dragged does not extend outside the enclosing panel's bounds. To facilitate this, the drag behavior also queries for dx and dy attributes on the underlying data, to determine the dimensions of the bar being dragged. For non-rectangular marks, the drag behavior simply treats the mark as a point, which means that only the mark's center is bounded.

The mark being dragged is automatically re-rendered for each mouse event as part of the drag operation. In addition, a fix attribute is populated on the mark, which allows visual feedback for dragging. For example, to change the mark fill color while dragging:

    .fillStyle(function(d) d.fix ? "#ff7f0e" : "#aec7e8")
In some cases, such as with network layouts, dragging the mark 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 drag psuedo-events:For example, to render the parent panel while dragging, thus re-rendering all sibling marks:
    .event("mousedown", pv.Behavior.drag())
    .event("drag", function() this.parent)
This behavior may be enhanced in the future to allow more flexible configuration of drag behavior.
Defined in: Drag.js.

Class Summary
Constructor Attributes Constructor Name and Description
Returns a new drag behavior to be registered on mousedown events.
Class Detail
Returns a new drag behavior to be registered on mousedown events.

Documentation generated by JsDoc Toolkit 2.3.2 on Sun May 30 2010 18:10:23 GMT-0700 (PDT)