Question

我有一张带有折线图的小倍数图表。一切都很漂亮，除了我无法弄清楚如何获取工具提示来获取我需要的数据。

示例和代码位于http://bl.ocks.org/emagee/8b2f557396d6f16ba65f。工具提示代码从第198行开始，工具提示变量在其上方声明。工具提示本身工作得很棒，但我无法弄清楚如何让工具提示显示＆＃34; date＆＃34;和＆＃34;计数＆＃34;变量。我确实弄清楚如何获得＆＃34;主题＆＃34;在工具提示中，但这是多余的，正如您将看到的那样。

具体来说，我的问题源于不知道如何跳过一个关卡，因为我深入挖掘了对象 - ＆＃34; key＆＃34;是第一级，然后是＆＃34;值＆＃34;，然后是一个未命名的构造，然后是我需要的数据（＆＃34; date＆＃34;＆＃34; count＆＃34;）。

关于如何从＆＃34;关键＆＃34;到了＆＃34; date＆＃34;和＆＃34;计数＆＃34;数据将是最受欢迎的。我确实理解它可能更像是一个基本的JS问题而不是D3.js问题，但我对这两个问题都有些不稳定！

附录（而且，我恐怕还有第二个问题） - 我现在还想知道问题的一部分是我访问整条线路/路径 - 而不是到个别点。我是否应该在线上叠加一些大小合适的，不可见的圆圈/点，并让工具提示尝试从那些读取...

Answer 1

您要问的第一个问题是，您是否想要他们所在的地点的日期和数量，或者您是否想要最接近他们所在地点的日期和数量？我假设后者，这就是我要回答的问题。

为此，我要使用invert和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：需要帮助抓取工具提示的数据

1 个答案: