Skip to content

[v1.8.0] Smooth Autoranging, entitiesAt() on Scatter Plots, Pie Plot improvements
Compare
Choose a tag to compare
@jtlan jtlan released this 21 Aug 21:21
· 1258 commits to master since this release
v1.8.0
b55722c

Users can now place labels on Plots.Rectangle. We've added an autorangeSmooth() option for Plots.Line and Plots.Area. Line Plots with autorangeMode() turned on have been very jerky during panning, but using autorangeSmooth() makes the movement smoother. We have also built entitiesAt() for Plots.Scatter, allowing the user to identify symbols containing a given point.

Bug fixes include cleaner strokes on Plots.Pie sectors. Also, Plots.Pie has stopped accepting negative values, eliminating several bugs. Axis.Time will now use margin() correctly; previously the call had no effect.

Performance improvements

Adding Datasets in batches using Plots.datasets() is now faster.

150 Datasets - 90x speedup

Note that this does not affect the Plot.addDataset() or Plot.removeDataset() endpoints. We recommend using Plots.Datasets() to add multiple datasets.

Features

entitiesAt() on Plots.Scatter

Users can now query for Entities that contain a given point on Plots.Scatter with .entitiesAt()

entitiesat

/**
 * Gets the Entities at a particular Point.
 *
 * @param {Point} p
 * @returns {PlotEntity[]}
 */
entitiesAt(p: Point)

Try it out: http://jsfiddle.net/ztsai/ufv4kea3/

Labels on Plots.Rectangle

screen shot 2015-08-21 at 12 06 10 pm

Plots.Rectangle now supports data-backed labels. Labels will not appear if they are partially covered by another rectangle.

  • Use labelsEnabled() to enable/disable labels:
/**
 * Gets whether labels are enabled.
 *
 * @returns {boolean}
 */
labelsEnabled(): boolean;
/**
 * Sets whether labels are enabled.
 * Labels too big to be contained in the rectangle, cut off by edges, or blocked by other rectangles will not be shown.
 *
 * @param {boolean} labelsEnabled
 * @returns {Rectangle} The calling Rectangle Plot.
 */
labelsEnabled(enabled: boolean): Plots.Rectangle<X, Y>;
  • Use label() to set the text of labels:
/**
 * Gets the accessor for labels.
 *
 * @returns {Accessor<string>}
 */
label(): Accessor<string>;
/**
 * Sets the text of labels to the result of an Accessor.
 *
 * @param {Accessor<string>} label
 * @returns {Plots.Rectangle} The calling Rectangle Plot.
 */
label(label: Accessor<string>): Plots.Rectangle<X, Y>;

Try it out: http://jsfiddle.net/ztsai/85ndejru/

Autorange Smooth

When panning and zooming on a plot with autorangeMode() set, the interaction has historically been very jerky. The movement can be made smoother by enabling autorangeSmooth(). This affects Plots.Line, Plots.Area and Plots.StackedArea.

Inital values chosen for domains may be messy. SnappingDomainEnabled(true) will choose cleaner values for Plots.Scales domains.

New API points

QuantitativeScale

/**
 * Gets whether or not the scale snaps its domain to nice values.
 */
snappingDomainEnabled(): boolean;
/**
 * Sets whether or not the scale snaps its domain to nice values.
 */
snappingDomainEnabled(snappingDomainEnabled: boolean): QuantitativeScale<D>;

Plots.Line

/**
 * Gets whether or not the autoranging is done smoothly.
 */
autorangeSmooth(): boolean;
/**
 * Sets whether or not the autorange is done smoothly.
 *
 * Smooth autoranging is done by making sure lines always exit on the left / right side of the plot
 * and deactivating the nice domain feature on the scales
 */
autorangeSmooth(autorangeSmooth: boolean): Plots.Line<X>;

Plots.Pie sector outline visual improvements

Slice outlines on Plots.Pie will no longer be cut off by the fill of adjacent slices:

screen shot 2015-08-21 at 2 18 05 pm

Try it out: http://jsfiddle.net/3b6jenpa/

NOTE: This feature is implemented by using a separate <path> to draw the outline of each slice, similar to how an extra <path> is used to draw the line on Plots.Area. This means that

piePlot.content().selectAll(".arc");

Will yield twice as many <path>s as before. The <path>s that draws the fill now also carry the CSS class "fill"; similarly, the <path>s that draw the outlines for each slice carry the CSS class "outline". These classes can be used to select the <path>s of interest:

piePlot.content().selectAll(".arc.fill"); // selects fills only
piePlot.content().selectAll(".arc.outline"); // selects outlines only

This feature addresses #2492.

Bugfixes

  • Axes.Time now properly includes uses its margin(). Previously arguments given to margin() were not taken into consideration. (#2042).
  • Negative values no longer render on Plots.Pie, eliminating bugs related to visual misrepresentation of data and the Plots.entities() endpoint. (#2611).
Assets 3
Loading