Show "now" line on event drops and add slight margin to the right

Question

1) I would like to display a vertical line with the "now" value

as well as

2) add a slight margin to the right - Currently "now" events are cropped because there is no space to the right of the last (most recent) event.

UPDATE: thanks to a suggestion in the comments, this is done easily by doing:

maxDate.add(1).hour()

with the fantastic date manipulation library at https://github.com/datejs/Datejs

e.g.: Current:

Desired:

Questions:

how can I retrieve the x value for the "now" value from the svg so I can draw the line?
How can I add a time margin (e.g. 1 hour) or relative margin (e.g. 10%) after the last event?

add some extra time to your scaleTime domain, you can do it by adding ms's to the date or use moment.js(??) — rioV8, Dec 06 '18 at 23:30
This is great and worked well - I use date.js https://github.com/datejs/Datejs maxDate.add(1).hour() — Alexandre Ackermans, Dec 08 '18 at 03:49

score 0 · Answer 1 · answered Jul 17 '19 at 03:29

To draw the line you would map the time into the scale. Then using that would draw at the returned value. You could do something like:

const chart = eventDrops({ d3 });
var now = new Date()
var x = chart.scale()

d3.select('#chart')
    .append('line')
    .attr('id', 'ticker')
    .attr('y1', 0)
    .attr('y2', 100)
    .attr('x1', x(now))
    .attr('x2', x(now))
    .attr('transform', `translate(200, 0)`)
    .style('stroke-width', 2)
    .style('stroke', 'blue')
    .style('fill', 'none')

As commented you would add the date margin to your chart's end date.

var maxDate = Date().today()
const chart = eventDrops({ 
     d3,
     range: {
      end: maxDate.add(1).hour()
     }
});

Show "now" line on event drops and add slight margin to the right

1 Answers1