d3plus-axis

Beautiful javascript scales and axes.

Installing

If you use NPM, run npm install d3plus-axis --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-axis.v0.3.full.min.js"></script>

Getting Started

d3plus-axis extrapolates on the ideas presented in d3-axis, most notably by adding grid lines and fitting the axis within the allotted space. To create a bottom axis in an SVG group defined like this:

<svg width=600 height=300>
  <g id="my-axis"></g>
</svg>

Here is the javascript needed:

var bottom = new d3plus.AxisBottom()
  .select("#my-axis")
  .domain([0, 10])
  .width(600)
  .height(300)
  .render();

The d3plus-axis module makes all four orientations available as shorthand methods for the generalized Axis class that they all extend. These axes are the brains behind d3plus-plot.

Click here to view this example live on the web.

More Examples

• Changing Axis Orientation
• Only Showing Specific Tick Labels
• Axis w/ Time Scale
• Tick Label Formatting
• Setting Custom Ticks

API Reference

Classes

• Axis
• AxisBottom
• AxisLeft
• AxisRight
• AxisTop

Functions

• date - Parses numbers and strings to valid Javascript Date objects.

Axis <>

This is a global class, and extends all of the methods and functionality of BaseClass.

• Axis ⇐ BaseClass
  • new Axis()
  • .render([callback]) ↩︎
  • .align([value]) ↩︎
  • .barConfig([value]) ↩︎
  • .domain([value]) ↩︎
  • .duration([value]) ↩︎
  • .grid([value]) ↩︎
  • .gridConfig([value]) ↩︎
  • .gridSize([value]) ↩︎
  • .height([value]) ↩︎
  • .labels([value]) ↩︎
  • .orient([orient]) ↩︎
  • .outerBounds()
  • .padding([value]) ↩︎
  • .paddingInner([value]) ↩︎
  • .paddingOuter([value]) ↩︎
  • .range([value]) ↩︎
  • .scale([value]) ↩︎
  • .select([selector]) ↩︎
  • .shape([value]) ↩︎
  • .shapeConfig([value]) ↩︎
  • .tickFormat([value]) ↩︎
  • .ticks([value]) ↩︎
  • .tickSize([value]) ↩︎
  • .title([value]) ↩︎
  • .titleConfig([value]) ↩︎
  • .width([value]) ↩︎

# new Axis()

Creates an SVG scale based on an array of data.

# Axis.render([callback]) <>

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

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

# Axis.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 Axis, and is chainable with other methods of this Class.

# Axis.barConfig([value]) <>

If value is specified, sets the axis line style and returns the current class instance. If value is not specified, returns the current axis line style.

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

# Axis.domain([value]) <>

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

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

# Axis.duration([value]) <>

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

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

# Axis.grid([value]) <>

If value is specified, sets the grid values of the axis and returns the current class instance. If value is not specified, returns the current grid values, which by default are interpreted based on the domain and the available width.

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

# Axis.gridConfig([value]) <>

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

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

# Axis.gridSize([value]) <>

If value is specified, sets the grid size of the axis and returns the current class instance. If value is not specified, returns the current grid size, which defaults to taking up as much space as available.

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

# Axis.height([value]) <>

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

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

# Axis.labels([value]) <>

If value is specified, sets the visible tick labels of the axis and returns the current class instance. If value is not specified, returns the current visible tick labels, which defaults to showing all labels.

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

# Axis.orient([orient]) <>

If orient is specified, sets the orientation of the shape and returns the current class instance. If orient is not specified, returns the current orientation.

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

# Axis.outerBounds() <>

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

This is a static method of Axis.

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

# Axis.padding([value]) <>

If value is specified, sets the padding between each tick label 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 Axis, and is chainable with other methods of this Class.

# Axis.paddingInner([value]) <>

If value is specified, sets the inner padding of band scale to the specified number and returns the current class instance. If value is not specified, returns the current inner padding value.

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

# Axis.paddingOuter([value]) <>

If value is specified, sets the outer padding of band scales to the specified number and returns the current class instance. If value is not specified, returns the current outer padding value.

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

# Axis.range([value]) <>

If value is specified, sets the scale range (in pixels) of the axis and returns the current class instance. The given array must have 2 values, but one may be undefined to allow the default behavior for that value. If value is not specified, returns the current scale range.

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

# Axis.scale([value]) <>

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

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

# Axis.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 Axis, and is chainable with other methods of this Class.

# Axis.shape([value]) <>

If value is specified, sets the tick shape constructor and returns the current class instance. If value is not specified, returns the current shape.

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

# Axis.shapeConfig([value]) <>

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

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

# Axis.tickFormat([value]) <>

If value is specified, sets the tick formatter and returns the current class instance. If value is not specified, returns the current tick formatter, which by default is retrieved from the d3-scale.

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

# Axis.ticks([value]) <>

If value is specified, sets the tick values of the axis and returns the current class instance. If value is not specified, returns the current tick values, which by default are interpreted based on the domain and the available width.

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

# Axis.tickSize([value]) <>

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

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

# Axis.title([value]) <>

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

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

# Axis.titleConfig([value]) <>

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

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

# Axis.width([value]) <>

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

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

AxisBottom <>

This is a global class, and extends all of the methods and functionality of Axis.

# new AxisBottom()

Shorthand method for creating an axis where the ticks are drawn below the horizontal domain path. Extends all functionality of the base Axis class.

AxisLeft <>

This is a global class, and extends all of the methods and functionality of Axis.

# new AxisLeft()

Shorthand method for creating an axis where the ticks are drawn to the left of the vertical domain path. Extends all functionality of the base Axis class.

AxisRight <>

This is a global class, and extends all of the methods and functionality of Axis.

# new AxisRight()

Shorthand method for creating an axis where the ticks are drawn to the right of the vertical domain path. Extends all functionality of the base Axis class.

AxisTop <>

This is a global class, and extends all of the methods and functionality of Axis.

# new AxisTop()

Shorthand method for creating an axis where the ticks are drawn above the vertical domain path. Extends all functionality of the base Axis class.

d3plus.date(date) <>

Returns a javascript Date object for a given a Number (representing either a 4-digit year or milliseconds since epoch) or a String that is in valid dateString format. Besides the 4-digit year parsing, this function is useful when needing to parse negative (BC) years, which the vanilla Date object cannot parse.

This is a global function.

_{Documentation generated on Tue, 20 Jun 2017 21:23:20 GMT}