d3.js - 在事件下降时显示“现在”行并在右侧添加少许边距

Question

1）我想用“现在”值显示一条垂直线

也

2) 在右边添加一个小边距 - 当前“现在”事件被裁剪，因为最后一个（最近的）事件的右侧没有空间。

更新：感谢评论中的建议，这很容易通过以下方式完成：

maxDate.add(1).hour()

使用https://github.com/datejs/Datejs上的精彩日期操作库

例如： 当前：

期望：

问题：

• 如何从 svg 中检索“现在”值的 x 值，以便画线？

• 如何在最后一个事件之后添加时间保证金（例如 1 小时）或相对保证金（例如 10%）？

Answer 1

要画线，您可以将时间映射到比例中。然后使用它将绘制返回值。您可以执行以下操作：

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')

如评论所述，您可以将日期边距添加到图表的结束日期。

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