带有填充区域图的D3.js工具提示

Question

我一直在尝试许多不同的例子（以及关于SO的答案）来获取工作提示在填充区域图上工作，但一直在努力想出一个可行的解决方案。

我基于这个工具提示：http://bl.ocks.org/mbostock/3902569而实际图表来自另一个实现非常相似的示例。我一直试图解决为什么它不能正常工作，但我得到了多个这样的控制台错误

Uncaught TypeError: Cannot read property 'date' of undefined 

来自这行代码

d = x0 - d0.date > d1.date - x0 ? d1 : d0;

这是我的代码http://bl.ocks.org/Frozenfire92/80ba8c6f844cf48708c4

Answer 1

问题在于d3.bisect假设数据已排序，但您的数据并非如此。因此，它无法在数据数组中找到正确的元素。修复很简单 - 对数据进行排序：

data.sort(function(a, b) { return a.date - b.date; });

完整演示here。