[v1.9.0] DragLineLayer and Plots.Wheel
This release includes DragLineLayer
s, which serve the same purpose as GuideLineLayer
s but are also draggable. You can now pass in DOM Elements to renderTo(). We're excited to announce Plots.Wheel
as a new Plot, with additional features coming soon!
Features
DragLineLayer
This subclass of GuideLineLayer
has a built-in Drag
Interaction
that allows it to be repositioned by dragging. It has the following additional API points:
/**
* Get/set the detection radius in pixels.
*/
public detectionRadius(): number;
public detectionRadius(detectionRadius: number): DragLineLayer<D>;
/**
* Get/set the enabled status.
*/
public enabled(): boolean;
public enabled(enabled: boolean): DragLineLayer<D>;
/**
* Add or remove callbacks.
*/
public onDragStart(callback: DragLineCallback<D>): DragLineLayer<D>;
public offDragStart(callback: DragLineCallback<D>): DragLineLayer<D>;
public onDrag(callback: DragLineCallback<D>): DragLineLayer<D>;
public offDrag(callback: DragLineCallback<D>): DragLineLayer<D>;
public onDragEnd(callback: DragLineCallback<D>): DragLineLayer<D>;
public offDragEnd(callback: DragLineCallback<D>): DragLineLayer<D>;
Try it out: http://jsfiddle.net/p0tovrz5/
renderTo()
works with DOM Elements
Previously, renderTo()
only worked with strings identifying DOM Elements, or d3 selections. Now, renderTo()
can be passed the DOM Element itself.
Try it here: http://jsfiddle.net/82wugm84/
New Plot: Plots.Wheel
!
NOTE: Plots.Wheel
is an in-progress feature, and is not yet complete. We have several improvements planned, and our progress can be tracked here: #2612
Plots.Wheel
utilizes polar coordinates, and uses the accessors .r()
and .t()
.
- The
r
direction onPlots.Wheel
moves outward from the center of the wheel along the radius. - The
t
direction is measured in degrees if no scale is provided. It increases clockwise aroundPlots.Wheel
, starting from vertical.
Plots.Wheel
has four property methods: t()
, t2()
, r()
, and r2()
, which are used to define the bounds of the arcs:
/**
* Sets t to a constant number or the result of an Accessor<number> in degrees.
*/
t(t: number | Accessor<number>): Plots.Wheel<R, T>;
/**
* Sets t to a scaled constant value or scaled result of an Accessor in degrees.
* The supplied Scale will also be used for t2().
*/
t(t: T | Accessor<T>, scale: QuantitativeScale<T>): Plots.Wheel<R, T>;
/**
* Sets t2 to a constant number or the result of an Accessor<number> in degrees.
* If a Scale has been set for t, it will also be used to scale t2.
*/
t2(t2: number | Accessor<number> | T | Accessor<T>): Plots.Wheel<R, T>;
/**
* Sets r to a constant number or the result of an Accessor<number>.
*/
r(r: number | Accessor<number>): Plots.Wheel<R, T>;
/**
* Sets r to a scaled constant value or scaled result of an Accessor.
* The supplied Scale will also be used for r2().
*/
r(r: R | Accessor<R>, scale: QuantitativeScale<R>): Plots.Wheel<R, T>;
/**
* Gets the AccessorScaleBinding for r2.
*/
r2(): AccessorScaleBinding<R, number>;
/**
* Sets r2 to a constant number or the result of an Accessor<number>.
* If a Scale has been set for r, it will also be used to scale r2.
*/
r2(r2: number | Accessor<number> | R | Accessor<R>): Plots.Wheel<R, T>;
t()
and t2()
share a Scale
, and r()
and r2()
share a Scale
. Currently, only QuantitativeScale
s are supported for these properties. We intend to add additional scales in the near future.
Try it here: http://jsfiddle.net/ztsai/dvaev9b0/