d3plus-legend

d3plus-legend

An easy to use javascript chart legend.

Installing

If you use NPM, npm install d3plus-legend. Otherwise, download the latest release. The released bundle supports AMD, CommonJS, and vanilla environments. Create a custom bundle using Rollup or your preferred bundler. You can also load directly from d3plus.org:

<script src="https://d3plus.org/js/d3plus-legend.v0.8.full.min.js"></script>

API Reference

Classes

ColorScale ⇐ BaseClass

Legend ⇐ BaseClass

ColorScale ⇐ BaseClass

Kind: global class
Extends: BaseClass

• ColorScale ⇐ BaseClass
  • new ColorScale()
  • .render([callback]) ↩︎
  • .axisConfig([value]) ↩︎
  • .align([value]) ↩︎
  • .color([value]) ↩︎
  • .data([data]) ↩︎
  • .duration([value]) ↩︎
  • .height([value]) ↩︎
  • .orient([value]) ↩︎
  • .outerBounds()
  • .padding([value]) ↩︎
  • .rectConfig([value]) ↩︎
  • .scale([value]) ↩︎
  • .select([selector]) ↩︎
  • .size([value]) ↩︎
  • .value([value]) ↩︎
  • .width([value]) ↩︎

new ColorScale()

Creates an SVG scale based on an array of data. If data is specified, immediately draws based on the specified array and returns the current class instance. If data is not specified on instantiation, it can be passed/updated after instantiation using the data method.

ColorScale.render([callback]) ↩︎

Renders the current ColorScale to the page. If a callback is specified, it will be called once the ColorScale is done drawing.

Kind: static method of ColorScale
Chainable

Param	Type
[callback]	function

ColorScale.axisConfig([value]) ↩︎

If value is specified, sets the axis configuration of the ColorScale and returns the current class instance. If value is not specified, returns the current axis configuration.

Kind: static method of ColorScale
Chainable

Param	Type
[value]	Object

ColorScale.align([value]) ↩︎

If value is specified, sets the horizontal alignment to the specified value and returns the current class instance. If value is not specified, returns the current horizontal alignment.

Kind: static method of ColorScale
Chainable

Param	Type	Default	Description
[value]	String	"center"	Supports "left" and "center" and "right".

ColorScale.color([value]) ↩︎

Defines the color or colors to be used for the scale. If only a single color is given as a String, then the scale is interpolated by lightening that color. Otherwise, the function expects an Array of color values to be used in order for the scale.

Kind: static method of ColorScale
Chainable

Param	Type	Default
[value]	String | Array	"#0C8040"

ColorScale.data([data]) ↩︎

If data is specified, sets the data array to the specified array and returns the current class instance. If data is not specified, returns the current data array. A shape key will be drawn for each object in the array.

Kind: static method of ColorScale
Chainable

Param	Type	Default
[data]	Array	[]

ColorScale.duration([value]) ↩︎

If value is specified, sets the transition duration of the ColorScale and returns the current class instance. If value is not specified, returns the current duration.

Kind: static method of ColorScale
Chainable

Param	Type	Default
[value]	Number	600

ColorScale.height([value]) ↩︎

If value is specified, sets the overall height of the ColorScale and returns the current class instance. If value is not specified, returns the current height value.

Kind: static method of ColorScale
Chainable

Param	Type	Default
[value]	Number	100

ColorScale.orient([value]) ↩︎

Sets the flow of the items inside the ColorScale. If no value is passed, the current flow will be returned.

Kind: static method of ColorScale
Chainable

Param	Type	Default
[value]	String	"bottom"

ColorScale.outerBounds()

If called after the elements have been drawn to DOM, will returns the outer bounds of the ColorScale content.

Kind: static method of ColorScale
Example

{"width": 180, "height": 24, "x": 10, "y": 20}

ColorScale.padding([value]) ↩︎

If value is specified, sets the padding between each key to the specified number and returns the current class instance. If value is not specified, returns the current padding value.

Kind: static method of ColorScale
Chainable

Param	Type	Default
[value]	Number	10

ColorScale.rectConfig([value]) ↩︎

Provides access to the config method of the Rect class used to create the different rectangle color buckets.

Kind: static method of ColorScale
Chainable

Param	Type
[value]	Object

ColorScale.scale([value]) ↩︎

If value is specified, sets the scale of the ColorScale and returns the current class instance. If value is not specified, returns the current scale value.

Kind: static method of ColorScale
Chainable

Param	Type	Default	Description
[value]	String	"linear"	Can either be "linear", "jenks", or "buckets".

ColorScale.select([selector]) ↩︎

If selector is specified, sets the SVG container element to the specified d3 selector or DOM element and returns the current class instance. If selector is not specified, returns the current SVG container element.

Kind: static method of ColorScale
Chainable

Param	Type	Default
[selector]	String | HTMLElement	d3.select("body").append("svg")

ColorScale.size([value]) ↩︎

The height of horizontal color scales, and width when positioned vertical.

Kind: static method of ColorScale
Chainable

Param	Type	Default
[value]	Number	10

ColorScale.value([value]) ↩︎

If value is specified, sets the value accessor to the specified function or string and returns the current class instance. If value is not specified, returns the current value accessor.

Kind: static method of ColorScale
Chainable

Param	Type
[value]	function | String

Example

function value(d) {
  return d.value;
}

ColorScale.width([value]) ↩︎

If value is specified, sets the overall width of the ColorScale and returns the current class instance. If value is not specified, returns the current width value.

Kind: static method of ColorScale
Chainable

Param	Type	Default
[value]	Number	400

Legend ⇐ BaseClass

Kind: global class
Extends: BaseClass

• Legend ⇐ BaseClass
  • new Legend()
  • .render([callback]) ↩︎
  • .active([value]) ↩︎
  • .align([value]) ↩︎
  • .data([data]) ↩︎
  • .direction([value]) ↩︎
  • .duration([value]) ↩︎
  • .height([value]) ↩︎
  • .hover([value]) ↩︎
  • .id([value]) ↩︎
  • .label([value]) ↩︎
  • .outerBounds()
  • .padding([value]) ↩︎
  • .select([selector]) ↩︎
  • .shape([value]) ↩︎
  • .shapeConfig([config]) ↩︎
  • .title([value]) ↩︎
  • .titleConfig([value]) ↩︎
  • .verticalAlign([value]) ↩︎
  • .width([value]) ↩︎

new Legend()

Creates an SVG scale based on an array of data. If data is specified, immediately draws based on the specified array and returns the current class instance. If data is not specified on instantiation, it can be passed/updated after instantiation using the data method.

Legend.render([callback]) ↩︎

Renders the current Legend to the page. If a callback is specified, it will be called once the legend is done drawing.

Kind: static method of Legend
Chainable

Param	Type
[callback]	function

Legend.active([value]) ↩︎

If value is specified, sets the active method for all shapes to the specified function and returns the current class instance. If value is not specified, returns the current active method.

Kind: static method of Legend
Chainable

Param	Type
[value]	function

Legend.align([value]) ↩︎

If value is specified, sets the horizontal alignment to the specified value and returns the current class instance. If value is not specified, returns the current horizontal alignment.

Kind: static method of Legend
Chainable

Param	Type	Default	Description
[value]	String	"center"	Supports "left" and "center" and "right".

Legend.data([data]) ↩︎

If data is specified, sets the data array to the specified array and returns the current class instance. If data is not specified, returns the current data array. A shape key will be drawn for each object in the array.

Kind: static method of Legend
Chainable

Param	Type	Default
[data]	Array	[]

Legend.direction([value]) ↩︎

Sets the flow of the items inside the legend. If no value is passed, the current flow will be returned.

Kind: static method of Legend
Chainable

Param	Type	Default
[value]	String	"row"

Legend.duration([value]) ↩︎

If value is specified, sets the transition duration of the legend and returns the current class instance. If value is not specified, returns the current duration.

Kind: static method of Legend
Chainable

Param	Type	Default
[value]	Number	600

Legend.height([value]) ↩︎

If value is specified, sets the overall height of the legend and returns the current class instance. If value is not specified, returns the current height value.

Kind: static method of Legend
Chainable

Param	Type	Default
[value]	Number	100

Legend.hover([value]) ↩︎

If value is specified, sets the hover method for all shapes to the specified function and returns the current class instance. If value is not specified, returns the current hover method.

Kind: static method of Legend
Chainable

Param	Type
[value]	function

Legend.id([value]) ↩︎

If value is specified, sets the id accessor to the specified function and returns the current class instance. If value is not specified, returns the current id accessor.

Kind: static method of Legend
Chainable

Param	Type
[value]	function

Example

function value(d) {
  return d.id;
}

Legend.label([value]) ↩︎

If value is specified, sets the label accessor to the specified function or string and returns the current class instance. If value is not specified, returns the current label accessor, which is the id accessor by default.

Kind: static method of Legend
Chainable

Param	Type
[value]	function | String

Legend.outerBounds()

If called after the elements have been drawn to DOM, will returns the outer bounds of the legend content.

Kind: static method of Legend
Example

{"width": 180, "height": 24, "x": 10, "y": 20}

Legend.padding([value]) ↩︎

If value is specified, sets the padding between each key to the specified number and returns the current class instance. If value is not specified, returns the current padding value.

Kind: static method of Legend
Chainable

Param	Type	Default
[value]	Number	10

Legend.select([selector]) ↩︎

If selector is specified, sets the SVG container element to the specified d3 selector or DOM element and returns the current class instance. If selector is not specified, returns the current SVG container element.

Kind: static method of Legend
Chainable

Param	Type	Default
[selector]	String | HTMLElement	d3.select("body").append("svg")

Legend.shape([value]) ↩︎

If value is specified, sets the shape accessor to the specified function or string and returns the current class instance. If value is not specified, returns the current shape accessor.

Kind: static method of Legend
Chainable

Param	Type	Default
[value]	function | String	"Rect"

Legend.shapeConfig([config]) ↩︎

If config is specified, sets the methods that correspond to the key/value pairs for each shape and returns the current class instance. If config is not specified, returns the current shape configuration.

Kind: static method of Legend
Chainable

Param	Type	Default
[config]	Object	{}

Legend.title([value]) ↩︎

If value is specified, sets the title of the legend and returns the current class instance. If value is not specified, returns the current title.

Kind: static method of Legend
Chainable

Param	Type
[value]	String

Legend.titleConfig([value]) ↩︎

If value is specified, sets the title configuration of the legend and returns the current class instance. If value is not specified, returns the current title configuration.

Kind: static method of Legend
Chainable

Param	Type
[value]	Object

Legend.verticalAlign([value]) ↩︎

If value is specified, sets the vertical alignment to the specified value and returns the current class instance. If value is not specified, returns the current vertical alignment.

Kind: static method of Legend
Chainable

Param	Type	Default	Description
[value]	String	"middle"	Supports "top" and "middle" and "bottom".

Legend.width([value]) ↩︎

If value is specified, sets the overall width of the legend and returns the current class instance. If value is not specified, returns the current width value.

Kind: static method of Legend
Chainable

Param	Type	Default
[value]	Number	400

_{Documentation generated on Mon, 27 Mar 2017 23:36:39 GMT}