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

Question

这是我的demo（永久链接;可能需要一秒钟加载）。

我遇到了一些问题：

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

我花了很多时间试图找到正确的方法来做到这一点。但是，我最终使用简单的数学来猜测上部数据边界。还有许多问题有待解决，例如如何直观地处理极端问题。

我可以通过on github访问我开发可重用直方图库的尝试。