Permalink
Browse files

update doc and example

  • Loading branch information...
kristw committed Jun 16, 2017
1 parent 4a5e116 commit 6bf6fd4f0e358cce448f4b564b730cfa4d9fee98
Showing with 36 additions and 27 deletions.
  1. +18 −1 CHANGELOG.md
  2. +13 −21 docs/api.md
  3. +5 −5 examples/src/main.js
View
@@ -1,6 +1,23 @@
# d3Kit-timeline
## v1.x.x
## v2
### v2.0.0
#### Breaking changes
- Accessing the axis via `chart.axis` is deprecated. Please set the `formatAxis` in options instead
```diff
- chart.axis.ticks(0)
+ chart.options({
+ formatAxis: axis => axis.ticks(0)
+ })
```
- Calling `.resizeToFit()` requires a call to `.visualize()` before it.
## v1
### v1.3.1
View
@@ -13,22 +13,23 @@ There are many options that you can customize. These are often set when creating
| margin | {left: 40, right: 20, top: 20, bottom: 20} | margin for the chart area (more like a padding) |
| initialWidth | 400 | chart width including margin |
| initialHeight | 400 | chart height including margin |
| scale | d3.time.scale() | Can specify other type of scale e.g. ```d3.scale.linear``` |
| scale | d3.scaleTime() | Can specify other type of scale e.g. `d3.scaleLinear()` |
| domain | undefined | If set, will set domain of the scale to this value. Otherwise, the domain will be calculated from the extent of data. |
| direction | 'right' | location of the labels relative to the axis |
| keyFn | undefined | identifier function for each data point. ```function(d,i){return ...;}```|
| timeFn | return ```d.time```; | accessor function for time of each data point. ```function(d,i){return ...;}```|
| textFn | return ```d.text```; | accessor function for text of each data point. ```function(d,i){return ...;}```|
| labella | ```{}``` | options for Labella.js layout. See [Labella.js](https://github.com/twitter/labella.js/blob/master/docs/Force.md#constructor) documentation for more details. For example, to set maxixum position for the labels to 500, set this option to ```{maxPos: 500}``` |
| formatAxis | axis => axis | customize the axis before drawing, such as `axis => axis.ticks(0)` to hide all the ticks |
| keyFn | undefined | identifier function for each data point. `(d, i) => ...`|
| timeFn | `d => d.time` | accessor function for time of each data point. `(d, i) => ...`|
| textFn | `d => d.text` | accessor function for text of each data point. `(d, i) => ...`|
| labella | ```{}``` | options for Labella.js layout. See [Labella.js](https://github.com/twitter/labella.js/blob/master/docs/Force.md#constructor) documentation for more details. For example, to set maxixum position for the labels to 500, set this option to `{maxPos: 500}` |
| layerGap | 60 | distance from axis to the first layer of labels and between each layer of labels (in situations where all labels cannot fit within one layer) |
| dotRadius | 3 | radius of the dots. It can be a Number or Function ```function(d,i){return ...;}``` |
| dotColor | #222 | color of the dots. It can be a color value or Function ```function(d,i){return ...;}``` |
| labelBgColor | #222 | color of the label background. It can be a color value or Function ```function(d,i){return ...;}``` |
| labelTextColor | #fff | color of the label text. It can be a color value or Function ```function(d,i){return ...;}``` |
| linkColor | #222 | color of the paths that link dots to labels. It can be a color value or Function ```function(d,i){return ...;}``` |
| dotRadius | 3 | radius of the dots. It can be a Number or Function `(d, i) => ...` |
| dotColor | #222 | color of the dots. It can be a color value or Function `(d, i) => ...` |
| labelBgColor | #222 | color of the label background. It can be a color value or Function `(d, i) => ...` |
| labelTextColor | #fff | color of the label text. It can be a color value or Function `(d, i) => ...` |
| linkColor | #222 | color of the paths that link dots to labels. It can be a color value or Function `(d, i) => ...` |
| labelPadding | {left: 4, right: 4, top: 3, bottom: 2} | space to add around the text within each label |
| textYOffset | 0.85em | vertical offset for text within label |
| textStyle | null | style for label text. It must be an object with style field as key, the value can be constant or `function(d,i){ return ... }`. Any style field for svg `<text>` is applicable. See an example below |
| textStyle | null | style for label text. It must be an object with style field as key, the value can be constant or `(d, i) => ...`. Any style field for svg `<text>` is applicable. See an example below |
```javascript
var options = {
@@ -40,16 +41,6 @@ var options = {
};
```
### Fields
<a name="axis" href="#axis">#</a> chart.**axis**
An axis renderer for the timeline. See [d3.svg.axis](https://github.com/mbostock/d3/wiki/SVG-Axes) for full API reference. One common use case is to hide all the ticks.
```javascript
chart.axis.ticks(0).tickSize(0);
```
### Functions
<a name="data" href="#data">#</a> chart.**data**([data:Array])
@@ -82,3 +73,4 @@ These events are included with d3Kit-timeline. The handler function signature is
<a name="resizeToFit" href="#resizeToFit">#</a> chart.**resizeToFit**()
If the direction is *left* or *right*, it will set the width automatically. If the direction is *up* or *down*, it will set the height automatically.
Must be called after `.updateDimensionNow()`
View
@@ -73,7 +73,7 @@ const chart2x = new d3KitTimeline('#t2x', {
chart2x
.data(data)
.updateDimensionNow()
.visualize()
.resizeToFit();
//---------------------------------------------------
@@ -97,7 +97,7 @@ const chart3 = new d3KitTimeline('#timeline3', {
});
chart3
.data(data)
.updateDimensionNow()
.visualize()
.resizeToFit();
//---------------------------------------------------
@@ -122,7 +122,7 @@ const chart4 = new d3KitTimeline('#timeline4', {
});
chart4
.data(data)
.updateDimensionNow()
.visualize()
.resizeToFit();
//---------------------------------------------------
@@ -150,7 +150,7 @@ const chart5 = new d3KitTimeline('#timeline5', {
});
chart5
.data(data2)
.updateDimensionNow()
.visualize()
.resizeToFit();
//---------------------------------------------------
@@ -184,5 +184,5 @@ const chart6 = new d3KitTimeline('#timeline6', {
chart6
.data(data2)
.updateDimensionNow()
.visualize()
.resizeToFit();

0 comments on commit 6bf6fd4

Please sign in to comment.