Vis.js, do not stack elements without temporary overlap

Question

I am using vis.js to display a timeline.

I have the following items:

var items = new vis.DataSet([
  {id: 1, content: '1) Next To 2', start: '2014-04-20 00:00:00', end : '2014-04-20 00:59:59'},
  {id: 2, content: '2) Next To 1', start: '2014-04-20 01:00:00', end : '2014-04-20 02:59:59'},
  {id: 3, content: 'Underneath   ', start: '2014-04-20 00:00:00', end : '2014-04-20 05:59:59'}
]);

id 1 and id 2 start / end do not overlap (in time). Therefore, I always want them to appear on the same line in the timeline, regardless of the zoom level.

However, I can’t install stack : false, since I want to id : 3be under 1 and 2.

Here is the JSFiddle: http://jsfiddle.net/uqn6q4jd/17/

1) and 2) must always be on the same line, 3) always under

Can I do it?

I looked at the source of Vis JS and I feel that I can possibly achieve what I need with the changes:

exports.stack = function...
exports.nostack = function...

, , , ...

Answer 1

vis . , :

var options = {
    margin: {
        item : {
            horizontal : 0
        }
    }
};

, . , , .

Answer 2

() .

, ( .., " ", ).

, .

, 1 2 1, 3 - 2. , sg2 sg1.

var items = new vis.DataSet([
  {id: 1, subgroup:1, content: '1) Next To 2', start: '2014-04-20 00:00:00', end : '2014-04-20 00:59:59'},
  {id: 2, subgroup:1, content: '2) Next To 1', start: '2014-04-20 01:00:00', end : '2014-04-20 02:59:59'},
  {id: 3, subgroup:2, content: 'Underneath   ', start: '2014-04-20 00:00:00', end : '2014-04-20 05:59:59'}
]);

/ , @Kazua , - .

Answer 3

, .

If the elements do not overlap and do not start at the same time or almost simultaneously, I just left the stack and set -25 to the horizontal field option.

margin: {
        item: 0,
        axis: 0,
        item : {
          horizontal : -25
        }
    },

This, in turn, puts all the elements on one line that do not overlap and do not add up if the elements overlap.

I also use vis.js - Timeline Version:4.19.1.

Answer 4

var options = {
    margin: {
        item : {
            horizontal : -1
        }
    }
};

i is using -1, so you don't need to zoom in to see how complicated it is