d3plus-legend

d3plus-legend

An easy to use javascript chart legend.

Installing

If you use NPM, run npm install d3plus-legend --save. Otherwise, download the latest release. The released bundle supports AMD, CommonJS, and vanilla environments. You can also load directly from d3plus.org:

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

Examples

• Changing Style of a Color Scale
• Creating a Color Scale
• Removing Legend Labels
• Images in Legends

API Reference

• ColorScale
• Legend

---

ColorScale <>

This is a global class, and extends all of the methods and functionality of 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.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.axisConfig([value]) <>

The ColorScale is constructed by combining an Axis for the ticks/labels and a Rect for the actual color box (or multiple boxes, as in a jenks scale). Because of this, there are separate configs for the Axis class used to display the text (axisConfig) and the Rect class used to draw the color breaks (rectConfig). This method acts as a pass-through to the config method of the Axis. An example usage of this method can be seen here.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# 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.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# 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.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# 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.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# 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.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# 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.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.orient([value]) <>

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

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.outerBounds() <>

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

This is a static method of ColorScale.

{"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.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.rectConfig([value]) <>

The ColorScale is constructed by combining an Axis for the ticks/labels and a Rect for the actual color box (or multiple boxes, as in a jenks scale). Because of this, there are separate configs for the Axis class used to display the text (axisConfig) and the Rect class used to draw the color breaks (rectConfig). This method acts as a pass-through to the config method of the Rect. An example usage of this method can be seen here.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# 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.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# 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.

This is a static method of ColorScale, and is chainable with other methods of this Class.

# ColorScale.size([value]) <>

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

This is a static method of ColorScale, and is chainable with other methods of this Class.

# 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.

This is a static method of ColorScale, and is chainable with other methods of this Class.

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.

This is a static method of ColorScale, and is chainable with other methods of this Class.

---

Legend <>

This is a global class, and extends all of the methods and functionality of 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.

This is a static method of Legend, and is chainable with other methods of this Class.

# 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.

This is a static method of Legend, and is chainable with other methods of this Class.

# 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.

This is a static method of Legend, and is chainable with other methods of this Class.

# 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.

This is a static method of Legend, and is chainable with other methods of this Class.

# Legend.direction([value]) <>

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

This is a static method of Legend, and is chainable with other methods of this Class.

# 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.

This is a static method of Legend, and is chainable with other methods of this Class.

# 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.

This is a static method of Legend, and is chainable with other methods of this Class.

# 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.

This is a static method of Legend, and is chainable with other methods of this Class.

# 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.

This is a static method of Legend, and is chainable with other methods of this Class.

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.

This is a static method of Legend, and is chainable with other methods of this Class.

# Legend.outerBounds() <>

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

This is a static method of Legend.

{"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.

This is a static method of Legend, and is chainable with other methods of this Class.

# 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.

This is a static method of Legend, and is chainable with other methods of this Class.

# 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.

This is a static method of Legend, and is chainable with other methods of this Class.

# 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.

This is a static method of Legend, and is chainable with other methods of this Class.

# 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.

This is a static method of Legend, and is chainable with other methods of this Class.

# 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.

This is a static method of Legend, and is chainable with other methods of this Class.

# 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.

This is a static method of Legend, and is chainable with other methods of this Class.

# 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.

This is a static method of Legend, and is chainable with other methods of this Class.

---

_{Documentation generated on Wed, 28 Mar 2018 21:14:12 GMT}