如何使用d3.js和crossfilter数据创建直方图？

Question

这是我的演示(永久链接;可能需要一秒钟加载).

我遇到了一些问题:

1. 交叉滤波器键不反映上边界.因此,x轴缺少一步.

   

   我设法通过获得一个组步长(group.all()[1] - group.all()[0]),然后将其添加到d3.extent(group.all())[1].因为它是一个脏修复,我没有将它包含在演示中(可能存在数据差距).获得组步长/固定x轴的不那么脏的方法是什么？

2. 条之间存在不均匀的间隙.我无法弄清楚如何修复x.scale与不同数据集的不一致.

   

   我希望条宽自动适应可用的图形宽度.因此,我计算最佳条宽,然后(如果需要)调整图形本身的大小:

   bar_width = math.round(graph_width/data_length);
   graph_width = bar_width*data_length;
   

   在这种情况下,无法x.scale为任何键值返回不均匀的数据,但确实如此.没有魔力; 我只是忽略了一些东西.但它是什么？

   当x.scale 被弄乱,然后减去bar_width从graph_width设置之前x.scale范围内解决问题.虽然,我无法弄清楚当x.scale没有按预期运行时检测的条件.

Answer 1

我花了很多时间试图找出正确的方法来做到这一点。然而，我最终使用简单的数学来猜测数据上限。还有很多问题有待解决，比如如何在视觉上处理极端情况。

我尝试开发一个可重用的直方图库，可以在 github 上访问。