使用d3创建泳道图表

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

这可能使用类似D3或有更好的JavaScript库，用于此类型的图表？我还没有看到任何类似的例子，所以如果可以使用D3，我不知道我会从哪里开始。任何提示将非常感谢。

2012-02-23 Bill

根据之前的回答和评论，我开始使用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。

来源

2012-02-28 23:45:08 Bill

这是伟大的，几乎我所需要的。我使用的情况下，是有这个工作有点像Mozilla的黄油，在那里我可以添加和使用时间线内的节点交互。时间表的例子可以在这里找到https://popcorn.webmaker.org/ – abritez 2013-12-22 12:08:59

-1

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

来源

2012-02-23 16:44:28 bjornd

不知道这是如何有帮助。 OP没有提及任何浏览器支持要求。 – Dogbert 2012-02-23 16:47:12

我同意。我一直在使用Raphael，我发现它是一个非常好的工具，并且它可以一直工作到IE6，这非常棒。 – 2012-02-23 16:47:58

@Dogbert虽然也不D3，既不raphael.js具有用于这种类型的图表没有原生支持，raphael.js具有更宽的浏览器支持。这就是我推荐它的原因。 – bjornd 2012-02-23 17:01:44

使用d3创建泳道图表

回答

相关问题