在Html5画布上使用滚动条绘制可缩放的时间线

Question

我的Web项目需要一个时间线。 像this这样的东西 - 我读了这个时间线的代码但是没理解它，因为它没有足够的记录。

我的问题是所有这些背后的数学（不是与画布的交互） 我have read several有关滚动条数学的文章，但没有人谈论缩放。
一些 articles建议保持画布元素具有非常大的宽度值 - 并且只显示 View Port。
我不认为这是正确的方法 - 我想绘制正确的视口。

在我的项目中，我有一些n点 每个点保持以秒为单位表示的时间值，但并非所有点都在Viewp端口内。

考虑到当前的缩放级别，我该如何计算：

应绘制哪些点以及绘制它们的位置？

拇指的大小和位置是什么？

关于此类事情的任何文章/教程？

Answer 1

您可能可以使用Flot之类的东西来处理点的位置，以及缩放和平移。 Here's一个例子。

还有许多其他绘图库，here a good list。

Answer 2

你总是有Raphealjs.com，这是最常用的SVG库之一，你可以编写自己的js来生成时间线。