d3plus-timeline

An easy-to-use javascript timeline.

Usage no npm install needed!

<script type="module">
  import d3plusTimeline from 'https://cdn.skypack.dev/d3plus-timeline';
</script>

README

d3plus-timeline

An easy-to-use javascript timeline.

Installing

If you use NPM, npm install d3plus-timeline. Otherwise, download the latest release. You can also load d3plus-timeline as a standalone library or as part of D3plus. ES modules, AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3plus global is exported:

<script src="https://cdn.jsdelivr.net/npm/d3plus-timeline@1"></script>
<script>
  console.log(d3plus);
</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

Changing Styles

API Reference

Timeline

Timeline <>

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

Timeline ⇐ Axis
- .render([callback]) ↩︎
- .buttonPadding([value]) ↩︎
- .brushing([value]) ↩︎
- .brushFilter([value]) ↩︎
- .buttonAlign([value]) ↩︎
- .buttonBehavior([value]) ↩︎
- .buttonHeight([value]) ↩︎
- .handleConfig([value]) ↩︎
- .handleSize([value]) ↩︎
- .on([typename], [listener]) ↩︎
- .selectionConfig([value]) ↩︎
- .selection([value]) ↩︎
- .snapping([value]) ↩︎

# 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 Tue, 02 Feb 2021 21:39:38 GMT}