Awesome
d3plus-timeline
An easy-to-use javascript timeline.
Installing
If using npm, npm install d3plus-timeline. Otherwise, you can download the latest release from GitHub or load from a CDN.
import modules from "d3plus-timeline";
d3plus-timeline can be loaded as a standalone library or bundled 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>
Examples
Live examples can be found on d3plus.org, which includes a collection of example visualizations using d3plus-react. These examples are powered by the d3plus-storybook repo, and PRs are always welcome. :beers:
API Reference
<a name="Timeline"></a>
Timeline <>
This is a global class, and extends all of the methods and functionality of <code>Axis</code>.
- Timeline ⇐ <code>Axis</code>
- .render([callback]) ↩︎
- .buttonPadding([value]) ↩︎
- .brushing([value]) ↩︎
- .brushFilter([value]) ↩︎
- .brushMin([value]) ↩︎
- .buttonAlign([value]) ↩︎
- .buttonBehavior([value]) ↩︎
- .buttonHeight([value]) ↩︎
- .handleConfig([value]) ↩︎
- .handleSize([value]) ↩︎
- .on([typename], [listener]) ↩︎
- .playButton([value]) ↩︎
- .playButtonConfig([value]) ↩︎
- .playButtonInterval([value]) ↩︎
- .selectionConfig([value]) ↩︎
- .selection([value]) ↩︎
- .snapping([value]) ↩︎
<a name="Timeline.render" href="#Timeline.render">#</a> Timeline.render([callback]) <>
Draws the timeline.
This is a static method of <code>Timeline</code>, and is chainable with other methods of this Class.
<a name="Timeline.buttonPadding" href="#Timeline.buttonPadding">#</a> 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 <code>Timeline</code>, and is chainable with other methods of this Class.
<a name="Timeline.brushing" href="#Timeline.brushing">#</a> 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 <code>Timeline</code>, and is chainable with other methods of this Class.
<a name="Timeline.brushFilter" href="#Timeline.brushFilter">#</a> 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 <code>Timeline</code>, and is chainable with other methods of this Class.
function() {
return !event.button && event.detail < 2;
}
<a name="Timeline.brushMin" href="#Timeline.brushMin">#</a> Timeline.brushMin([value]) <>
Sets the minimum number of "ticks" to allow to be highlighted when using "ticks" buttonBehavior. Helpful when using x/y plots where you don't want the user to select less than 2 time periods. Value passed can either be a static Number, or a function that is expected to return a Number.
This is a static method of <code>Timeline</code>, and is chainable with other methods of this Class.
<a name="Timeline.buttonAlign" href="#Timeline.buttonAlign">#</a> 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 <code>Timeline</code>, and is chainable with other methods of this Class.
<a name="Timeline.buttonBehavior" href="#Timeline.buttonBehavior">#</a> 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 <code>Timeline</code>, and is chainable with other methods of this Class.
<a name="Timeline.buttonHeight" href="#Timeline.buttonHeight">#</a> 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 <code>Timeline</code>, and is chainable with other methods of this Class.
<a name="Timeline.handleConfig" href="#Timeline.handleConfig">#</a> 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 <code>Timeline</code>, and is chainable with other methods of this Class.
<a name="Timeline.handleSize" href="#Timeline.handleSize">#</a> 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 <code>Timeline</code>, and is chainable with other methods of this Class.
<a name="Timeline.on" href="#Timeline.on">#</a> 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 <code>Timeline</code>, and is chainable with other methods of this Class.
| Param | Type |
|---|---|
| [typename] | <code>String</code> | <code>Object</code> |
| [listener] | <code>function</code> |
<a name="Timeline.playButton" href="#Timeline.playButton">#</a> Timeline.playButton([value]) <>
Determines the visibility of the play button to the left the of timeline, which will cycle through the available periods at a rate defined by the playButtonInterval method.
This is a static method of <code>Timeline</code>, and is chainable with other methods of this Class.
<a name="Timeline.playButtonConfig" href="#Timeline.playButtonConfig">#</a> Timeline.playButtonConfig([value]) <>
The config Object for the Rect class used to create the playButton.
This is a static method of <code>Timeline</code>, and is chainable with other methods of this Class.
<a name="Timeline.playButtonInterval" href="#Timeline.playButtonInterval">#</a> Timeline.playButtonInterval([value]) <>
The value, in milliseconds, to use when cycling through the available time periods when the user clicks the playButton.
This is a static method of <code>Timeline</code>, and is chainable with other methods of this Class.
<a name="Timeline.selectionConfig" href="#Timeline.selectionConfig">#</a> 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 <code>Timeline</code>, and is chainable with other methods of this Class.
<a name="Timeline.selection" href="#Timeline.selection">#</a> 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 <code>Timeline</code>, and is chainable with other methods of this Class.
<a name="Timeline.snapping" href="#Timeline.snapping">#</a> 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 <code>Timeline</code>, and is chainable with other methods of this Class.