根据前面的回答和评论，我开始了实现图表的路径 Raphael.js 。在写了600多行代码（主要是框架的东西来弥补它的裸骨性质）后，我发现 Raphael.js 在渲染文本非常慢。不知道为什么，但它显然是一个已知的问题。最后，它花了3.5s来渲染一个300个项目的图表，80％的时间花在渲染文本。

Based on the previous answer and comments, I started down the path of implementing the chart using Raphael.js. After writing 600+ lines of code (mostly framework stuff to make up for its bare bones nature) I discovered that Raphael.js is extremely slow at rendering text. Not sure exactly why, but it's apparently a known issue. In the end it was taking 3.5s to render a chart with 300 items with 80% of the time spent rendering text.

然后我开始使用 d3.js 。我发现在创建数据绑定图表时， d3.js 是更好的选择，当传统的浏览器支持不是一个问题。在 d3.js 中创建一个泳道图表带了我大约100行代码，而Raphael.js的600+。 d3.js 版本还有更多的功能，看起来更好，更灵敏。

I then started over with d3.js. I found that d3.js is the much better choice when creating data bound charts when legacy browser support isn't a concern. Creating a swim lane chart in d3.js took me about 100 lines of code vs the 600+ for Raphael.js. The d3.js version also has more functionality, looks nicer, and is more responsive.

虽然 d3.js 的声明式风格需要一些习惯，它使得处理数据变得容易。作为一个额外的好处，我的图表现在约在250毫秒:)

While the declarative style of d3.js takes some getting used to, it makes working with data super easy. As an added bonus, my chart now renders in about 250 ms :)

请参阅 http ：//bl.ocks.org/1962173 我创建的最终泳道图表。

See http://bl.ocks.org/1962173 for the final swim lane chart that I created.