[v1.9.0] DragLineLayer and Plots.Wheel
This release includes DragLineLayers, which serve the same purpose as GuideLineLayers 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
rdirection onPlots.Wheelmoves outward from the center of the wheel along the radius. - The
tdirection 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 QuantitativeScales are supported for these properties. We intend to add additional scales in the near future.
Try it here: http://jsfiddle.net/ztsai/dvaev9b0/

