使用 d3 创建泳道图 [关闭]答案

【问题标题】：Creating a swim lane chart using d3 [closed]使用 d3 创建泳道图 [关闭]
【发布时间】：2012-02-23 16:39:34
【问题描述】：

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

这是否可以使用 d3 之类的东西，或者是否有更好的 JavaScript 库可用于此类图表？我还没有看到任何类似的例子，所以如果可以使用 d3 我不确定我会从哪里开始。任何提示将不胜感激。

【问题讨论】：

【解决方案1】：

基于前面的答案和 cmets，我开始使用Raphael.js 实现图表的路径。在编写了 600 多行代码（主要是框架的东西来弥补它的基本性质）之后，我发现Raphael.js 在呈现文本时非常慢。不知道确切原因，但这显然是一个已知问题。最后，渲染一个包含 300 个项目的图表需要 3.5 秒，其中 80% 的时间用于渲染文本。

然后我从 d3.js 重新开始。我发现d3.js 是在不考虑旧版浏览器支持时创建数据绑定图表时更好的选择。在d3.js 中创建泳道图表花了我大约 100 行代码，而 Raphael.js 需要 600 多行代码。 d3.js 版本也有更多的功能，看起来更漂亮，而且响应更快。

虽然 d3.js 的声明式风格需要一些时间来适应，但它使处理数据变得超级容易。作为额外的奖励，我的图表现在可以在大约 250 毫秒内呈现 :)

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

【讨论】：

这很棒，几乎也是我需要的。我的用例是让这项工作有点像 Mozilla Butter，我可以在时间线内添加节点并与之交互。时间线示例可以在这里找到popcorn.webmaker.org

【解决方案2】：

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

【讨论】：

不确定这有什么帮助。 OP 没有提及任何浏览器支持要求。
我同意。我使用 Raphael 已经有一段时间了，我发现它是一个非常好的工具，而且它可以一直运行到 IE6，这一点非常棒。
@Dogbert 虽然和 d3，raphael.js 都没有对此类图表的原生支持，但 raphael.js 具有更广泛的浏览器支持。这就是我推荐它的原因。
是否有任何可能有用的 raphael 库或示例？还是我会从头开始？