diff --git a/README.md b/README.md index f466a7f..8ad0b93 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,7 @@ myChart | xTickFormat([function]) | X axis tick label formatter function, as pass-through to [d3-axis](https://github.com/d3/d3-axis#axis_tickFormat). By default, it uses a [multi-scale time format](https://bl.ocks.org/mbostock/4149176). | | | dateMarker([date object]) | Getter/setter for the date marker to show as a vertical line. If a falsy value is used, no marker is shown. | `null` | | minSegmentDuration([number]) | Getter/setter for the minimum time duration (in msecs) of a segment in order for it to be shown. | 0 | +| minSegmentWidth([number]) | Getter/setter for the minimum displayed px width of a segment. | 1 | | getNLines() | Returns number of timelines currently visible in the chart. | - | | getTotalNLines() | Returns total number of timelines in the chart. | - | | zQualitative([boolean]) | Getter/setter for whether the segment data color values are categorical (true) or quantitative (false). This will affect how the color legend is presented, and changing it will automatically toggle the `zColorScale` between defaults. | false | diff --git a/src/index.d.ts b/src/index.d.ts index 410489f..656a9a2 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -60,6 +60,8 @@ export interface TimelinesChartGenericInstance { dateMarker(date: TS | null | boolean): ChainableInstance; minSegmentDuration(): number; minSegmentDuration(duration: number): ChainableInstance; + minSegmentWidth(): number; + minSegmentWidth(width: number): ChainableInstance; getNLines(): number; getTotalNLines(): number; diff --git a/src/timelines.js b/src/timelines.js index 32765cf..5474197 100644 --- a/src/timelines.js +++ b/src/timelines.js @@ -127,6 +127,7 @@ export default Kapsule({ } }, minSegmentDuration: {}, + minSegmentWidth: { default: 1 }, zColorScale: { default: d3ScaleSequential(interpolateRdYlBu) }, zQualitative: { default: false, onChange(discrete, state) { state.zColorScale = discrete @@ -1003,7 +1004,7 @@ export default Kapsule({ return state.xScale(d.timeRange[0])-hoverEnlarge/2; }) .attr('width', function (d) { - return d3Max([1, state.xScale(d.timeRange[1])-state.xScale(d.timeRange[0])])+hoverEnlarge; + return d3Max([state.minSegmentWidth, state.xScale(d.timeRange[1])-state.xScale(d.timeRange[0])])+hoverEnlarge; }) .attr('y', function (d) { return state.yScale(d.group+'+&+'+d.label)-(state.lineHeight+hoverEnlarge)/2; @@ -1018,7 +1019,7 @@ export default Kapsule({ return state.xScale(d.timeRange[0]); }) .attr('width', function (d) { - return d3Max([1, state.xScale(d.timeRange[1])-state.xScale(d.timeRange[0])]); + return d3Max([state.minSegmentWidth, state.xScale(d.timeRange[1])-state.xScale(d.timeRange[0])]); }) .attr('y', function (d) { return state.yScale(d.group+'+&+'+d.label)-state.lineHeight/2; @@ -1038,7 +1039,7 @@ export default Kapsule({ return state.xScale(d.timeRange[0]); }) .attr('width', function (d) { - return d3Max([1, state.xScale(d.timeRange[1])-state.xScale(d.timeRange[0])]); + return d3Max([state.minSegmentWidth, state.xScale(d.timeRange[1])-state.xScale(d.timeRange[0])]); }) .attr('y', function (d) { return state.yScale(d.group+'+&+'+d.label)-state.lineHeight/2;