如何使用d3.js和交叉过滤数据创建直方图？

这是我的（永久链接；可能需要一秒钟才能加载）

我有一些问题：

交叉过滤器关键点不反映上边界。因此，x轴缺少一个步骤

我通过获得一个组步长（

group.all（）[1]-group.all（）[0]

）并将其添加到

d3.extent（group.all（））[1]

，成功地解决了这个问题。因为这是一个肮脏的修复程序，所以我没有将其包含在演示中（可能会出现数据缺口）。获得组步长/固定x轴的不太脏的方法是什么

钢筋之间有不均匀的间隙。我不知道如何修复不同数据集的x.scale不一致性

我希望条形图宽度自动适应可用的图形宽度。因此，我计算最佳条形宽度，然后（如果需要）调整图形本身的大小：

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

在这种情况下，

x.scale

无法为任何键值返回不均匀的数据，但它确实可以。没有魔法；我只是忽略了一些事情。但这是什么呢

当

x.scale

出错时，在设置

x.scale

范围之前，从

graph\u width

中扣除

bar\u width

，即可解决问题。尽管如此，我无法确定当x.scale未按预期运行时要检测的条件

---

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

---

我尝试开发一个可重用的直方图库是可以访问的。

这太棒了！是否有默认高亮显示的功能？很久没有接触过了。如果您在GitHub上提交问题/功能请求，我将查看它。