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

eg: 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 (eg 1 hour) or relative margin (eg 10%) after the last event?

Answer 1

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()
     }
});