An easy-to-use javascript timeline.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
example compiles v0.4.10 Feb 18, 2019
src
.eslintrc updates environment Sep 27, 2018
.gitignore
.travis.yml
LICENSE updates environment files Mar 3, 2018
README.md updates documentation Feb 18, 2019
index.js
package-lock.json
package.json

README.md

d3plus-timeline

NPM Release Build Status Dependency Status Gitter 1.0 progress

An easy-to-use javascript timeline.

Installing

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

Getting Started

A d3plus timeline extends the functionality of a d3plus-axis by also allowing user to select a given time period using a one-dimensional d3-brush. Here is all you need to do in order to create a d3plus timeline:

new d3plus.Timeline()
  .domain([2001, 2010])
  .render();

Click here to view this example live on the web.

More Examples

API Reference


Timeline <>

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

# Timeline.render([callback]) <>

Draws the timeline.

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

# Timeline.buttonPadding([value]) <>

If value is specified, sets the button padding and returns the current class instance. If value is not specified, returns the current button padding.

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

# Timeline.brushing([value]) <>

If value is specified, toggles the brushing value and returns the current class instance. If value is not specified, returns the current brushing value.

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

# Timeline.brushFilter([value]) <>

If value is specified, sets the brush event filter and returns the current class instance. If value is not specified, returns the current brush event filter.

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

function() {
  return !event.button && event.detail < 2;
}

# Timeline.buttonAlign([value]) <>

If value is specified, toggles the horizontal alignment of the button timeline. Accepted values are "start", "middle" and "end". If value is not specified, returns the current button value.

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

# Timeline.buttonBehavior([value]) <>

If value is specified, toggles the style of the timeline. Accepted values are "auto", "buttons" and "ticks". If value is not specified, returns the current button value.

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

# Timeline.buttonHeight([value]) <>

If value is specified, sets the button height and returns the current class instance. If value is not specified, returns the current button height.

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

# Timeline.handleConfig([value]) <>

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

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

# Timeline.handleSize([value]) <>

If value is specified, sets the handle size and returns the current class instance. If value is not specified, returns the current handle size.

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

# Timeline.on([typename], [listener]) <>

Adds or removes a listener for the specified brush event typename. If a listener is not specified, returns the currently-assigned listener for the specified event typename. Mirrors the core d3-brush behavior.

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

Param Type
[typename] String | Object
[listener] function

# Timeline.selectionConfig([value]) <>

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

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

# Timeline.selection([value]) <>

If value is specified, sets the selection and returns the current class instance. If value is not specified, returns the current selection. Defaults to the most recent year in the timeline.

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

# Timeline.snapping([value]) <>

If value is specified, toggles the snapping value and returns the current class instance. If value is not specified, returns the current snapping value.

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


Documentation generated on Mon, 18 Feb 2019 20:41:19 GMT