D3.js：需要帮助获取工具提示的数据

Question

我有一张带有折线图的小倍数图。一切都很好，除了我不知道如何让工具提示获取我需要的数据。

示例和代码位于 http://bl.ocks.org/emagee/8b2f557396d6f16ba65f。工具提示代码从第 198 行开始，在其上方声明了 toolTip 变量。工具提示本身运行良好，但我不知道如何让工具提示显示 "date" 和 "count" 变量。我确实弄清楚了如何在工具提示中获取 "subject"，但这是多余的，如您所见。

具体来说，我的问题源于在我深入研究对象时不知道如何跳过一个级别——"key" 是第一级，然后是 "values"，然后是一个未命名的结构，然后我需要的数据（"date" 和 "count"）。

任何有关如何从 "key" 获取 "date" 和 "count" 数据的指导将不胜感激。我知道这可能更像是一个基本的 JS 问题，而不是 D3.js 问题，但我对这两个问题都有点犹豫！

附录（恐怕还有第二个问题）——我现在也想知道问题的一部分是否是我正在访问整个 line/path——而不是个人点。我是否应该在线条上叠加一些大小合适、不可见的 circles/points 并让工具提示尝试从中获取读数...

Answer 1

您要问的第一个问题是您想要他们鼠标悬停的位置的日期和计数，还是想要距离他们鼠标悬停的位置最近的点的日期和计数？我假设是后者，所以这就是我要回答的。

为此，我将使用 invert and a bisector:

的组合

 .on("mouseover", function(s) { 

   var xDate = x.invert(d3.mouse(this)[0]), //<-- give me the date at the x mouse position
     bisect = d3.bisector(function(d) { return d.date; }).left, //<-- set up a bisector to search the array for the closest point to the left
     idx = bisect(s.values, xDate); //<-- find that point given our mouse position

您现在可以使用：

s.values[idx].date
s.values[idx].count

这是一个有效的 example。

D3.js：需要帮助获取工具提示的数据

D3.js: Need help grabbing data for tooltip

d3.js

tooltip