带有填充区域图的 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。