d3 y域和范围

时间:2014-01-15 09:49:02

标签: javascript d3.js

我需要找出根据日期绘制y轴的位置

我的数据在.csv格式中如下所示:

startYYYYMM, endYYYYMM, ProjectName
201301, 201303, Proj1
201302, 201412, Proj2
201304, 201311, Proj3

我已经将图表作为铺设条形图

从哪里开始x轴上的条形取决于开始并没有问题。这就是问题所在。 我想知道如果d3中有任何内置的“优化”我可以使用。我发布我可以遍历我的数据来决定我的数据的“分组”。

我希望它看起来像一张照片: https://www.dropbox.com/s/5xs0jfxb33ipn60/temp.jpg

/感谢的

1 个答案:

答案 0 :(得分:0)

如果我理解正确,你想要的和标准甘特图之间的区别在于甘特图将每个项目放在自己的行上,但是你想要压缩显示,以便长期完成的项目不会继续占据一排空白。

要获得“基于日期的优化功能”,找出Y域上的位置,您可以适合项目以保持显示紧凑,您将需要跟踪给定项目处于活动状态的项目时间,并循环浏览它们,找出你在显示器上为新项目留出空间的地方。

这是您可以实施的算法。结果并不总是完美的(有时一个小矩形最终会占据一个可以放置更大矩形的空间),但它应该比标准的甘特图更紧凑。

  1. 按开始日期对项目进行排序,然后按顺序对其进行排序,为每个项目分配y位置。

  2. 在处理项目列表时,请保留一个“活动”项目的辅助数组 - 那些已经启动但在您查找时尚未完成的项目。这些将始终是您已经在图表上定位的项目,因为您按照开始时间顺序定位项目。

  3. 对于主阵列中的每个项目:

    • 浏览活动项目数组(如果它不是空的)并删除在您正在绘制项目之前完成的所有项目(如果要在矩形之间填充,需要在两者之间传递一定的最短时间) );

    • 按活动项目数组按已分配给每个项目矩形的y位置排序;

    • 扫描活动项目数组,检查每个矩形的y位置和高度,看看是否有空间为当前项目放置矩形;

    • 如果您无法在任何当前活动的项目之间插入它,请将其位置设置为位于上一个活动项目之上,并检查此矩形的新位置+高度是否超过之前的最大高度

    • 无论哪种方式,都会在项目的数据对象中存储计算出的y位置(与您用于矩形高度的变量的位置相同)。

  4. 现在您已设置此项目的位置,将其添加到活动项目阵列并转到主阵列中的下一个项目。

  5. 确定每个矩形的相对y位置后,根据您使用的最大高度设置y比例域并绘制轴和矩形。

  6. 你可以看一下this answer的灵感,虽然这个例子比你需要的更复杂。