Skip to content

[v1.9.0] DragLineLayer and Plots.Wheel

Compare
Choose a tag to compare
@crmorford crmorford released this 28 Aug 22:39
· 1068 commits to master since this release

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

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 on Plots.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 around Plots.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.

screen shot 2015-08-28 at 3 08 44 pm

Try it here: http://jsfiddle.net/ztsai/dvaev9b0/