使用d3创建泳道图表

Question

我需要生成类似于以下的泳道图表，但在Y轴上添加了显示日期。我需要显示的所有节点都是具有依赖关系的活动，没有流控制元素。

这可能是使用像d3这样的东西还是有更好的javascript库用于这种类型的图表？我还没有看到任何类似的例子，所以如果有可能使用d3，我不知道我会从哪里开始。任何提示将不胜感激。

Answer 1

根据之前的回答和评论，我开始使用Raphael.js实现图表的路径。在编写600多行代码（主要是框架内容以弥补其裸露的性质）之后，我发现Raphael.js在渲染文本时非常慢。不确定为什么，但它显然是一个已知的问题。最后花了3.5秒来渲染一个包含300个项目的图表，其中80％的时间用于渲染文本。

然后我开始使用d3.js。我发现在创建数据绑定图表时，d3.js是更好的选择，而不需要考虑旧版浏览器支持。在d3.js中创建一个泳道图表，给我带来了大约100行代码，而对于Raphael.js则为600+。 d3.js版本还具有更多功能，看起来更好，响应更快。

虽然d3.js的声明式样式需要一些时间来适应，但它使得处理数据非常容易。作为额外的奖励，我的图表现在渲染大约250毫秒:)

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

Answer 2

在我看来，raphael.js在这里很合适。它支持包括IE6-8在内的所有浏览器，而d3仅适用于支持SVG的浏览器。