javascript – 使用d3创建泳道图

前端之家收集整理的这篇文章主要介绍了javascript – 使用d3创建泳道图前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要生成一个类似于以下内容的泳道图,但在Y轴上添加显示日期.我需要显示的所有节点都是依赖关系的活动,没有流量控制元素.

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

解决方法

基于以前的答案和评论,我开始使用Raphael.js实现图表的路径.在写了600行代码(主要是框架的东西来弥补它的裸体本质)之后,我发现Raphael.js在渲染文本时非常慢.不知道为什么,但它显然是一个已知的问题.最后,花费了3.5s来渲染300个项目,其中80%的时间用于渲染文本.

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

虽然d3.js的声明风格需要一些习惯,但它使数据处理变得非常简单.作为一个额外的好处,我的图表现在呈现约250毫秒:)

参见http://bl.ocks.org/1962173为我创建的最后的泳道图.

猜你在找的JavaScript相关文章